позиционирование webkit-scrollbar абсолютный и вертикальный центр

Question

Я хочу сделать отзывчивое меню. На мобильном устройстве я хочу разрешить прокручиваемое меню, и мне нужно сделать это с помощью прокрутки по умолчанию. Я хочу, чтобы эти стрелки прокрутки вертикально центрировались в моем меню, но я не знаю, как это сделать. Там мой JSFiddle (зеленый и красный стрела, что я заменяющая с изображениями)

Существует мой WebKit-прокрутка CSS

#page .page-nav::-webkit-scrollbar{  
    -webkit-appearance: none; 
    background: transparent; 
    z-index: 300; 
} 

#page .page-nav::-webkit-scrollbar-button{} 

#page .page-nav::-webkit-scrollbar-button:increment{ 
    background: red; 
} 

#page .page-nav::-webkit-scrollbar-button:decrement{ 
    background: green; 
} 

Answer 1

я не думаю, что вы можете поместить текст в верхней части полосы прокрутки. поэтому мое решение заключается в том, что вы не используете полосу прокрутки (установите overflow:hidden) и вместо этого используйте две кнопки, которые действуют как полоса прокрутки (нажмите налево, прокрутите влево, щелкните по правому краю направо), потому что это по сути то, что вы хотите , правильно ?

предполагая, что вы не можете изменить структуру HTML (запись внутри HTML) я добавил кнопки .previous и .next с JQ

затем, используя метод scrollLeft(), я достиг желаемого поведения.

дайте мне знать, если это то, что вы хотите.

см ниже фрагмент кода:

$('<span class="previous"></span>').prependTo("#page") 
 
$('<span class="next"></span>').appendTo("#page") 
 

 
$(".previous").click(function(){ 
 
    var posLeft = $(".page-nav").scrollLeft(); 
 
    $(".page-nav").animate({scrollLeft: posLeft - 200}, 500); 
 

 
}) 
 
$(".next").click(function(){ 
 
    var posLeft = $(".page-nav").scrollLeft(); 
 
    $(".page-nav").animate({scrollLeft: posLeft + 200}, 500); 
 

 
})

@import url('https://fonts.googleapis.com/css?family=Roboto:100'); 
 

 
a{text-decoration:none;} 
 

 
#page{ 
 
    position:relative; 
 
    font-family:"Roboto"; 
 
    font-weight:100; 
 
    font-size:13px; 
 
} 
 

 
#page .page-nav{ 
 
    background: white; 
 
    position:relative; 
 
    white-space: nowrap; 
 
    overflow-x: hidden; 
 
    -webkit-overflow-scrolling: touch; 
 
    -ms-overflow-style: -ms-autohiding-scrollbar; 
 
} 
 

 
#page .page-nav::-webkit-scrollbar{  
 
    -webkit-appearance: none; 
 
    background: transparent; 
 
    z-index: 300; 
 
} 
 

 
#page .page-nav::-webkit-scrollbar-button{} 
 

 
#page .page-nav::-webkit-scrollbar-button:increment{ 
 
    background: red; 
 
} 
 

 
#page .page-nav::-webkit-scrollbar-button:decrement{ 
 
    background: green; 
 
} 
 

 
#page .page-nav .items{ 
 
    display: table; 
 
    margin: 0 auto; 
 
} 
 

 
#page .page-nav .items .scroll-right, #page .page-nav .items .scroll-left{ 
 
    content: ""; 
 
    background-image: url(../images/sort.svg); 
 
    background-repeat: no-repeat; 
 
    background-size: 9px; 
 
    width: 9px; 
 
    height: 12px; 
 
    position: fixed; 
 
    z-index: 200; 
 
    cursor: pointer; 
 
} 
 

 
#page .page-nav .items:after{ 
 
    content: ''; 
 
    width: 200px; 
 
    height: 31px; 
 
    position: fixed; 
 
    right: 0; 
 
    background: -webkit-linear-gradient(left ,transparent -0px, white); 
 
    z-index: 100; 
 
} 
 

 
#page .page-nav .item{ 
 
    display: inline-block; 
 
    margin: 6px 15px; 
 
} 
 

 
#page .page-nav .item a{color:#333333;} 
 

 
#page .page-nav .item.current a{ 
 
    color: #0099ff; 
 
} 
 

 

 
/* NEW CSS */ 
 

 
span { 
 
    height:20px; 
 
    width:20px; 
 
    display:inline-block; 
 
    top:50%; 
 
    transform:translateY(-50%); 
 
    position:absolute; 
 
    z-index:9999; 
 
} 
 
span.previous { 
 
    background:red; 
 
    left:0; 
 
} 
 
span.next { 
 
    background:green; 
 
    right:0; 
 
    
 
} 
 
#page { position:relative;} 
 
.page-nav { padding-left:15px;padding-right:25px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="page"> 
 
    <div class="page-nav"> 
 
     <div class="items"> 
 
      <div class="item"><a href="">Menu item 1</a></div> 
 
      <div class="item"><a href="">Menu item 2</a></div> 
 
      <div class="item"><a href="">Menu item 3</a></div> 
 
      <div class="item"><a href="">Menu item 4</a></div> 
 
      <div class="item"><a href="">Menu item 5</a></div> 
 
      <div class="item current"><a href="">Menu item 6</a></div> 
 
      <div class="item"><a href="">Menu item 7</a></div> 
 
      <div class="item"><a href="">Menu item 8</a></div> 
 
      <div class="item"><a href="">Menu item 9</a></div> 
 
     </div> 
 
    </div> 
 
</div>

P.S. Я добавил новый CSS в нижней части вашего CSS. я не удалял вас. поэтому вы можете очистить его, если используете это решение.