方法一:
纯CSS+div样式隐藏。
在需要滚动的元素外面再套一个div,给最外面的div设置样式overflow:hidden,宽度比需要滚动的元素小;
之后给需要滚动的元素设置样式overflow-x:hidden; overflow-y:scroll;
- 1111
- 1111
- 1111
- 1111
- 1111
- 1111
- 1111
效果 : 前 后


方法二
给需要滚动的元素添加伪选择器,::-webkit-scrollbar{width:0;},
将宽度设为0,滚动条就会隐藏。
PS:
可以设置滚动条样式,使其美观。
/*滚动条宽 长,滚动条整体部分,其中的属性有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://javaforall.net/202772.html原文链接:https://javaforall.net
