Question

嗨我想让垂直滚动不可见，但我想让水平滚动条可见。此外，我希望我的页面可以垂直和水平滚动。

我用过：

.my_class::-webkit-scrollbar{
    display: none;
    }

但它使两个滚动条都不可见。

Answer 1

overflow-y: hidden; // hide vertical
overflow-x: hidden; // hide horizontal

这两个CSS属性可用于隐藏滚动条。

Answer 2

我不得不说使用简单的CSS技巧，你将无法实现这一目标。

我建议你使用自定义滚动条插件，你可以通过它简单地为每个滚动条类型应用css技巧，如下所示：

$(document).ready(function() {
  $(".container").customScrollbar();
});

.container {
  max-width: 300px;
  max-height: 100px;
}

.container .overview {
  width: 800px;
}

.scrollable .scroll-bar.horizontal {
  background: #eee; height: 5px; border-radius: 20px;
}
.scrollable .scroll-bar.horizontal .thumb {
  background: #999; 
  border-radius: 20px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://rawgit.com/mzubala/jquery-custom-scrollbar/master/jquery.custom-scrollbar.css" />
<script src="https://rawgit.com/mzubala/jquery-custom-scrollbar/master/jquery.custom-scrollbar.js"></script>

<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.
</div>

Answer 3

使用溢流属性： overflow-y: hidden

只使垂直滚动不可见

3 个答案: