0
点赞
收藏
分享

微信扫一扫

浏览器滚动条的自定义和隐藏

栖桐 2022-12-10 阅读 163

我们在处理业务的时候,偶尔会因为某些非抵抗力因素,需要对浏览器的滚动条进行处理,以提升产品的体验。本文我们来谈谈关于浏览器滚动条的自定义和隐藏 😊

自定义滚动条

首先,我们来认识滚动条的那些选择器。对于 ​​webkit​​ 内核的浏览器,滚动条有以下的选择器:

名称

用途

scrollbar

滚动条 - 占据指定的宽高

scrollbar-track

滚动条的轨道

scrollbar-corner

滚动条的底角,水平和垂直位置相遇的地方。

scrollbar-button

滚动条的上下按钮 ​​mac 上俺试了没效果,读者可以在 window 上尝试下​

scrollbar-thumb

滚动条上的滑块

scrollbar-track-piece

除了滑块之外的轨道

resizer

出现在元素底部可以拖动的滑块,一般跟 ​​scrollbar-corner​​ 位置相同

上面的名称省略前缀 ​​::-webkit-​

上面的这些概念讲着有点抽象,我们可以看看下面的例子。读者通过更改对应的代码熟悉下:

浏览器滚动条的自定义和隐藏_前端

鼠标移动到容器右下角的滑块,并点击拖动可以伸缩容器大小

好了,至此我们就可以根据自己业务实际的需求,运用不同的选择器,对滚动条进行自定义样式了。

隐藏滚动条

有时候,我们不需要显示滚动条。那我们可以通过下面的方式进行处理:

1. overflow: hidden 隐藏滚动条

​overflow: hidden​​ 这是一个老生常谈,但是实用性很强的知识点。

.div1 {
overflow: hidden; /* 隐藏 x 轴和 y 轴滚动条,即隐藏滚动条 */
}
.div2 {
overflow-y: hidden; /* 隐藏 y 轴,即垂直滚动条 */
}
.div3 {
overflow-x: hidden; /* 隐藏 x 轴,即水平滚动条 */
}

但是,这个方法有一个劣势:​​所在的容器是不可滚动了,但是超出的部分不可见​​。

2. display: none 隐藏滚动条

使用 ​​display: none​​ 我们依然可以正常滚动容器,超出的部分内容可以滚动到可视区域。

.outer {
width: 600px;
height: 200px;
margin: 20px auto;
border: 1px solid #f00;
overflow: scroll;
color: #fff;
/* 针对谷歌,Safari 和 Opera */
&::-webkit-scrollbar {
display: none;
}
-ms-overflow-style: none; /* IE 和 Edge */
scrollbar-width: none; /* Firefox */
}

浏览器滚动条的自定义和隐藏_前端

案例中,你可以左右滚动,查看滚动的距离

读者可以根据业务场景使用不同的方案。


举报

相关推荐

0 条评论