一、纯CSS+div样式隐藏
在需要滚动的元素外面再套一个div，给最外面的div设置样式overflow:hidden，宽度比需要滚动的元素小；
之后给需要滚动的元素设置样式overflow-x:hidden; overflow-y:scroll；
<style type="text/css">
*{margin:0;padding:0;}
.box{
width: 100px;
height: 300px;
overflow:hidden;
border:1px solid #000;
margin:50px auto;
}
ul {
height: 100%;
width: 120px;
overflow-x: hidden;
overflow-y: scroll;
}
ul li{
list-style: none;
width: 100px;
height:60px;
line-height: 60px;
text-align: center;
border:1px solid #ccc;
margin-top: -1px;
}
</style>
<div class="box">
<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
</div>
二、给需要滚动的元素添加伪选择器
::-webkit-scrollbar{width:0;}， //将宽度设为0，滚动条就会隐藏。
::-webkit-scrollbar { display: none; } //隐藏滚轮
拓展：可以设置滚动条样式，使其美观。
/*滚动条宽 长,滚动条整体部分，其中的属性有width,height,background,border等。*/
::-webkit-scrollbar{
width: 7px;
}
/*滚动条的滑轨背景颜色,可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。*/
::-webkit-scrollbar-track{
background-color: #f5f5f5;
-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.1);
border-radius:5px;
}
/* 滑块颜色 */
::-webkit-scrollbar-thumb{
background-color: rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
/*滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。*/
::-webkit-scrollbar-button{
background-color: #eee;
display: none;
}
/* 横向滚动条和纵向滚动条相交处尖角的颜色 */
::-webkit-scrollbar-corner{
background-color: black;
}
参考来源：https://blog.csdn.net/csdn_cai_csdn/article/details/78838949
标签：1111,滚动条,width,scrollbar,webkit,overflow,隐藏,CSS From： https://www.cnblogs.com/redFeather/p/17588422.html