共计 2223 个字符，预计需要花费 6 分钟才能阅读完成。
在挪动端开发中，常常会碰到须要横向滚动的场景，例如这样的
但很多时候是不须要展现这个滚动条的，也就是这样的成果，如下
你可能想到间接设置滚动条款式就能够了，就像这样
::-webkit-scrollbar {display: none;}目前来看如同没什么问题，但在某些版本的 iOS 上却有效（具体待测试），滚动条依然呈现。
那有没有其余形式能够解决这个问题呢？上面介绍几个办法
一、通过 overflow 暗藏
既然有时候批改滚动条款式无奈解决，咱们能够想方法把它暗藏。
上面是一个横向滚动列表
<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>简略润饰一下，让这个列表能够横向滚动
.list{
display: flex;
overflow: auto;
gap: 10px;
padding: 10px;
}
.item{
width: 100px;
height: 100px;
background: royalblue;
border-radius: 8px;
flex-shrink: 0;
}成果如下
通过 overflow 暗藏的形式很简略，咱们须要一个父级
<div class="wrap">
<div class="list">
</div>
</div>而后，将列表底部 padding 设置的略微大一些，比方
.list{
/**/
padding-bottom: 20px;
}能够看到列表下方的间隔变大了，滚动条也更靠下了，成果如下
如何让整体尺寸依然放弃原有呢？答案是借助负 margin，比方之前底部padding 是10，当初改成了 20，所以须要-10 的margin
.list{
/**/
margin-bottom: -10px;
}这样整体尺寸就失常了，不过滚动条依然是可见的，只是进来了
最初只须要设置父级的 overflow为暗藏就能够了
.wrap{
/**/
overflow: hidden;
}原理示意如下
这样就完满暗藏了滚动条
当然，不仅仅是 overflow，上面这种形式也能够实现超出暗藏
.wrap{
/**/
contain: paint;
}这个属性比拟新，能够管制元素在容器内的绘制规定，理解一下即可
https://developer.mozilla.org/zh-CN/docs/Web/CSS/contain
二、通过 clip 裁剪
第一种形式须要借助父级的超出暗藏，须要额定一层，如同有点麻烦，有没有方法本身也能够裁剪呢？
那就是 clip-path
https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path
置信大家对这个属性应该很纯熟了，十分直观的裁剪属性。
比方这种状况，只须要把滚动条的那一部分裁剪掉就能够了，这里要用到 clip-path 的inset办法
clip-path: inset()这里简略介绍一下。inset最多能够传 4 个参数，别离示意裁剪掉间隔上、右、下、左的局部
所以，要把滚动条暗藏就很简略了，只须要把下方的裁剪间隔设置大于滚动条尺寸的值就行了，这里就用10px
.list{clip-path: inset(0 0 10px)
}成果如下
一行代码轻松解决~
三、通过 mask 遮罩
其实和 clip思路是统一的，只不过实现形式不一样。
对于 mask 遮罩，之前在多篇文章中都有提到，十分应用的小技巧，次要原理是显示遮罩图片不通明的局部，通明的则会被裁剪，示意如下
回到这里，咱们只须要绘制一个不蕴含滚动条局部的纯色突变就行了，能够间接绘制一个纯色突变，而后设置背景尺寸，如下
.list{-webkit-mask: linear-gradient(red, red) 0 0/100% calc(100% - 10px) no-repeat;
}原理示意如下
也能很好的暗藏滚动条
除此以外，mask 还能够很好的实现滚动边界渐隐的成果，只须要叠加一层从 通明→纯色→通明 的突变就行了
.list{-webkit-mask: linear-gradient(to right, transparent, red 15px calc(100% - 15px), transparent),
linear-gradient(red, red) 0 0/100% calc(100% - 10px) no-repeat;
-webkit-mask-composite: source-in;
}就能够失去这样的成果
因为是遮罩实现，并不是简略的色彩笼罩，所以换一种背景色彩也能够很好的交融
以上所有残缺 demo 能够查看以下链接
- CSS scroll hidden (codepen.io)
四、总结一下
以上共介绍了 3 种形式来暗藏滚动条，各有千秋
- overflow兼容性最好，也最直观，合乎大多数人思路，毛病是须要独自嵌套一层父级
- clip实现最简洁，也比拟好了解，在本案例中最为举荐
- mask思路和clip，实现起来略微简单一点，还能够实现更为简单的渐隐成果，可能把握更好
当然不仅仅只是本文的案例，很多场景都能够去尝试用多种形式去实现，更多的是施展本人的设想，这样的 CSS 不是更乏味吗？最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤
