只使垂直滚动不可见

Question

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

我用了：

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

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

Answer 1

我不得不说使用简单的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 2

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

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

Answer 3

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