隐藏移动端IOS和安卓上的滚动条

直接上代码,就几行

css 复制代码
::-webkit-scrollbar {
  /* 不显示出来,安卓上会自动补上滚动条 */
  display: block;
  /* 宽度为0,安卓上会自动补上滚动条 */
  width: .5px;
}

::-webkit-scrollbar-thumb {
  /* 让看不见但是存在 */
  background-color: transparent;
}
/* IOS上给body加上ios的class。直接隐藏即可达到目的 */
body.ios {
  ::-webkit-scrollbar {
    display: none;
  }
}

相关属性

::-webkit-scrollbar //1 滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。

::-webkit-scrollbar-button //2 滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。

::-webkit-scrollbar-track //3 外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。

::-webkit-scrollbar-track-piece //4 内层轨道,滚动条中间部分(除去)。 ::-webkit-scrollbar-thumb //5 滚动条里面可以拖动的那部分

::-webkit-scrollbar-corner //6 边角

::-webkit-resizer //7 定义右下角拖动块的样式

相关推荐
万少几秒前
鸿蒙外包的十大生存法则
前端·后端·面试
江号软件分享1 小时前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
Liudef067 小时前
儿童趣味记忆配对游戏
css·游戏·css3
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试