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

我认为你不能在滚动条顶部放置文字。所以我的解决方案是你不使用滚动条（设置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绝对和垂直居中

1 个答案: