定位 webkit-scrollbar absolute 和 vertically center

Question

我想制作响应式菜单。在移动设备上，我想允许一个可滚动的菜单，我需要使用默认滚动条来实现它。我想让这些滚动箭头在我的菜单上垂直居中，但我不知道怎么做。这是我的JSFiddle（绿色和红色是箭头，我用图片代替）

有我的webkit-scrollbar 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

我认为您不能将文本放置在滚动条的顶部。所以我的解决方案是你不使用滚动条（ set overflow:hidden ）而是使用 2 个像滚动条一样的按钮（点击左边，滚动到左边，点击右边到右边。）因为那是基本上就是你想要的，对吧？

假设你不能改变 HTML 结构（写在 HTML 里面）我用 JQ

添加了 .previous 和 .next 按钮

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

定位 webkit-scrollbar absolute 和 vertically center

positioning webkit-scrollbar absolute and vertically center

html

css

scroll

webkit