CSS：隐藏移动端的滚动条的方式

移动端开发中，有一个横向滚动元素，产品告诉我不需要滚动条，我说这个简单，隐藏一下不就行了，没想到还有安卓和ios不兼容的问题。

代码

<style>
  .list {
    display: flex;
    overflow: auto;
    gap: 10px;
    padding: 10px;
  }

  .item {
    width: 100px;
    height: 100px;
    background: royalblue;
    border-radius: 8px;
    flex-shrink: 0;
  }
style>

<div class="list">
  <div class="item">div>
  <div class="item">div>
  <div class="item">div>
  <div class="item">div>
  <div class="item">div>
  <div class="item">div>
  <div class="item">div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

方式一：-webkit-scrollbar

.list::-webkit-scrollbar {
    display: none;
  }
1
2
3

兼容性有问题，部分机器上还是会显示滚动条

方式二：overflow

外层添加一个父级元素

<div class="wrap">
  <div class="list">
    
  div>
div>
1
2
3
4
5

css

.wrap {
    overflow: hidden;
}

.list {
    padding-bottom: 20px;
    margin-bottom: -10px;
}
1
2
3
4
5
6
7
8

原理示意如下

方式三：clip-path

clip-path文档

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path

把下方滚动条位置裁剪掉

.list {
  clip-path: inset(0 0 10px);
}
1
2
3

方式四：mask 遮罩

原理：显示遮罩图片不透明的部分，透明的则会被裁剪

.list {
  -webkit-mask: linear-gradient(red, red) 0 0/100% calc(100% - 10px) no-repeat;
}
1
2
3

总结

• -webkit-scrollbar 存在兼容性问题

• overflow兼容性最好，也最直观，符合大多数人思路，缺点是需要单独嵌套一层父级

• clip实现最简洁，也比较好理解，在本案例中最为推荐

• mask 思路和clip一致，实现起来稍微复杂一点，还可以实现更为复杂的渐隐效果，能够掌握更好

参考

裁剪的3种方式，CSS 如何隐藏移动端的滚动条？