CSS隐藏滚动条的方法-前端-E先生的博客

　　方法一：

　　纯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;

}

小二感谢你的点赞留言

本文来自E先生的博客，如若转载，请注明出处：https://www.javajz.cn

CSS隐藏滚动条的方法