定位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。我没有删除你的。所以如果你使用这个解决方案你可能想要清理它。