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

theme: fancy

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

自定义滚动条

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

上面的名称省略前缀 ::-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 */
}

代码片段

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

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

本文正在参加「金石计划 . 瓜分6万现金大奖」