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

目录

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

代码

html 复制代码
<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>

方式一:-webkit-scrollbar

css 复制代码
.list::-webkit-scrollbar {
    display: none;
  }

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

方式二:overflow

外层添加一个父级元素

html 复制代码
<div class="wrap">
  <div class="list">
    
  </div>
</div>

css

css 复制代码
.wrap {
    overflow: hidden;
}

.list {
    padding-bottom: 20px;
    margin-bottom: -10px;
}

原理示意如下

方式三:clip-path

clip-path文档

把下方滚动条位置裁剪掉

css 复制代码
.list {
  clip-path: inset(0 0 10px);
}

方式四:mask 遮罩

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

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

总结

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

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

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

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

参考

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

相关推荐
五号厂房10 分钟前
仿照AntDesign,实现一个自定义Tab
前端
浏览器爱好者35 分钟前
如何删除Google Chrome中的所有历史记录【一键清除】
前端·chrome
米开朗基杨37 分钟前
Cursor 最强竞争对手来了,专治复杂大项目,免费一个月
前端·后端
Lonwayne38 分钟前
Web服务器技术选型指南:主流方案、核心对比与策略选择
运维·服务器·前端·程序那些事
brzhang1 小时前
效率神器!TmuxAI:一款无痕融入终端的AI助手,让我的开发体验翻倍提升
前端·后端·算法
海底火旺1 小时前
JavaScript 原型链检查:从 `instanceof` 到 `isPrototypeOf` 的演进
前端·javascript·面试
埃兰德欧神1 小时前
Lynx:革新跨端开发,一次编写,多端闪耀
前端·javascript·前端框架
贾公子1 小时前
详解 LeetCode 第 242 题 - 有效的字母组
前端
前端太佬1 小时前
小程序登录与授权功能全解析:从原理到设计的实战指南 (2025年最新规范实践版)
前端·微信·微信小程序
一抓掉一大把1 小时前
elementui日历显示红点及根据日程范围判断是否有红点
前端·javascript·elementui