在移動端開發(fā)中，經(jīng)常會碰到需要橫向滾動的場景，例如這樣的

但很多時候是不需要展示這個滾動條的，也就是這樣的效果，如下

你可能想到直接設(shè)置滾動條樣式就可以了，就像這樣

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

目前來看好像沒什么問題，但在某些版本的 iOS 上卻無效（具體待測試），滾動條仍然出現(xiàn)。

那有沒有其他方式可以解決這個問題呢？下面介紹幾個方法

一、通過 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設(shè)置的稍微大一些，比如

.list{
  /**/
  padding-bottom: 20px;
}

可以看到列表下方的距離變大了，滾動條也更靠下了，效果如下

如何讓整體尺寸仍然保持原有呢？答案是借助負(fù)margin，比如之前底部padding是10，現(xiàn)在改成了20，所以需要-10的margin

.list{
  /**/
  margin-bottom: -10px;
}

這樣整體尺寸就正常了，不過滾動條仍然是可見的，只是出去了

最后只需要設(shè)置父級的 overflow為隱藏就可以了

.wrap{
  /**/
  overflow: hidden;
}

原理示意如下

這樣就完美隱藏了滾動條

當(dāng)然，不僅僅是 overflow，下面這種方式也可以實(shí)現(xiàn)超出隱藏

.wrap{
  /**/
  contain: paint;
}

這個屬性比較新，可以控制元素在容器內(nèi)的繪制規(guī)則，了解一下即可

https://developer.mozilla.org/zh-CN/docs/Web/CSS/contain

二、通過 clip 裁剪

第一種方式需要借助父級的超出隱藏，需要額外一層，好像有點(diǎn)麻煩，有沒有辦法自身也可以裁剪呢？

那就是 clip-path

https://developer.mozilla.org/zh-CN/docs/Web/CSS/contain

相信大家對這個屬性應(yīng)該很熟練了，非常直觀的裁剪屬性。

比如這種情況，只需要把滾動條的那一部分裁剪掉就可以了，這里要用到clip-path的inset方法

clip-path: inset()

這里簡單介紹一下。inset最多可以傳4個參數(shù)，分別表示裁剪掉距離上、右、下、左的部分

所以，要把滾動條隱藏就很簡單了，只需要把下方的裁剪距離設(shè)置大于滾動條尺寸的值就行了，這里就用10px

.list{
  clip-path: inset(0 0 10px)
}

效果如下

一行代碼輕松解決~

三、通過 mask 遮罩

其實(shí)和 clip思路是一致的，只不過實(shí)現(xiàn)方式不一樣。

回到這里，我們只需要繪制一個不包含滾動條部分的純色漸變就行了，可以直接繪制一個純色漸變，然后設(shè)置背景尺寸，如下

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

原理示意如下

也能很好的隱藏滾動條

除此以外，mask 還可以很好的實(shí)現(xiàn)滾動邊界漸隱的效果，只需要疊加一層從透明→純色→透明的漸變就行了

.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;
}

就可以得到這樣的效果

由于是遮罩實(shí)現(xiàn)，并不是簡單的顏色覆蓋，所以換一種背景顏色也可以很好的融合

以上所有完整 demo 可以查看以下鏈接

https://codepen.io/xboxyan/pen/GRPrzeO

四、總結(jié)一下

以上共介紹了 3 種方式來隱藏滾動條，各有千秋

• overflow兼容性最好，也最直觀，符合大多數(shù)人思路，缺點(diǎn)是需要單獨(dú)嵌套一層父級
• clip實(shí)現(xiàn)最簡潔，也比較好理解，在本案例中最為推薦
• mask思路和clip，實(shí)現(xiàn)起來稍微復(fù)雜一點(diǎn)，還可以實(shí)現(xiàn)更為復(fù)雜的漸隱效果，能夠掌握更好

當(dāng)然不僅僅只是本文的案例，很多場景都可以去嘗試用多種方式去實(shí)現(xiàn)，更多的是發(fā)揮自己的想象，這樣的CSS不是更有趣嗎？

以上就是CSS隱藏移動端的滾動條的三種實(shí)現(xiàn)方式的詳細(xì)內(nèi)容，更多關(guān)于CSS隱藏滾動條的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論