定位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），而是使用2個按鈕，它們像一個滾動條（點擊左邊，滾動到左邊，點擊右邊到右邊），因爲這基本上是你想要的， 對 ？

假設你不能改變HTML結構（HTML內部寫）1加入.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>

附：我在CSS的底部添加了新的CSS。我沒有刪除你的。所以如果你使用這個解決方案你可能想要清理它。