css怎么让滚动条隐藏以及修改样式

愚公爱上精卫

已于 2023-08-14 14:41:00 修改

阅读量1.4k

点赞数

分类专栏： css 文章标签：前端 html css3

于 2023-08-07 10:54:05 首次发布

本文链接：https://blog.csdn.net/m0_64520392/article/details/132141688

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、隐藏滚动条

1、这个适用于Chrome 经过试验360也可以

::-webkit-scrollbar{
display:none;/*隐藏滚动条*/
}

2、要想在其他浏览器中隐藏滚动条，就给滚动条父级添加一个overflow：hidden；即可隐藏滚动条

3、如果以上两个方法都不行，那就用最笨的方法把给他父级设置padding-left，把滚动条挤出视野范围，这样也算把他隐藏了。

2、修改滚动条样式

 .Gun_dongtiao{
        width: 95%;
        height: 660px;
        overflow-y: auto;
        overflow-x: hidden;
        margin-top: 30px;
        padding: 10px 10px;
 }
/* 定义滚动条样式 */
.Gun_dongtiao::-webkit-scrollbar {
		width: 6px;
		height: 6px;
		background: rgba(29,29,38,.7);
}
/*定义滚动条轨道*/
.Gun_dongtiao::-webkit-scrollbar-track {
		box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
		border-radius: 10px;
		background: rgba(29,29,38,.7);
}
/*定义滑块*/
.Gun_dongtiao::-webkit-scrollbar-thumb {
		border-radius: 10px;
		box-shadow: inset 0 0 0px rgba(118, 118, 118, 0.5);
		background-color: rgba(118, 118, 118, 0.5);
}

这是修改后的滚动条样式