隐藏滚动条的方法

使用iframe的页面通常会出现双滚动条，还有一些不希望出现滚动条的页面也出现了滚动条，这个时候希望隐藏滚动条。

一个直接的思路，是调整滚动容器的宽高和overflow，使得滚动条消失。但是往往是隐藏了滚动条，使得内容也被截断，不能达到效果。

换个思路，隐藏滚动条，只是让滚动条看不见，不是去除。

具体做法有：

1. 挤出  padding挤出滚动条，负margin拉回，父容器overflow:hidden隐藏滚动条

2. 剪切  clip-path: inset

3. mask遮挡  mask，mask-size隐藏，或者 mask 透明渐变隐藏

4. 伪元素遮挡 after伪元素遮挡滚动条

5. 滚动条样式设置  部分ios会失效

::-webkit-scrollbar {
  display: none;
}

 

详细可参考 裁剪的3种方式，CSS 如何隐藏移动端的滚动条