乐趣区

关于前端:裁剪的3种方式CSS-如何隐藏移动端的滚动条

jiezi

在挪动端开发中，常常会碰到须要横向滚动的场景，例如这样的

但很多时候是不须要展现这个滚动条的，也就是这样的成果，如下

你可能想到间接设置滚动条款式就能够了，就像这样

::-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 种形式来暗藏滚动条，各有千秋

  1. overflow兼容性最好，也最直观，合乎大多数人思路，毛病是须要独自嵌套一层父级
  2. clip实现最简洁，也比拟好了解，在本案例中最为举荐
  3. mask思路和clip，实现起来略微简单一点，还能够实现更为简单的渐隐成果，可能把握更好

当然不仅仅只是本文的案例，很多场景都能够去尝试用多种形式去实现，更多的是施展本人的设想，这样的 CSS 不是更乏味吗？最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

退出移动版