移动端隐藏滚动条,css方法
小白第一次发文记录自己遇到的问题。
关于隐藏移动端滚动条方法很多,这里只说本人用到的。
在PC端隐藏html右侧默认滚动条
1 2 3 4 5 6 7 8 | html { /*隐藏滚动条,当IE下溢出,仍然可以滚动*/ -ms-overflow-style:none; /*火狐下隐藏滚动条*/ scrollbar-width: none; } /*Chrome下隐藏滚动条,溢出可以透明滚动*/ html::-webkit-scrollbar{width:0px} |
ie/Edge的样式会使页面内所有滚动条隐藏。Chrome和火狐会隐藏右侧默认滚动条,想要隐藏某个标签内滚动条要单独给予相应样式。
移动端隐藏滚动条
上面ie与火狐样式也可用于移动端。但Chrome(右侧默认滚动条)就不可以了。
这里我只说我用到的方式,Chrome移动端想要用::-webkit-scrollbar{width:0px}的样式隐藏右侧默认滚动条。需要设置html,body的width和height
html,body{ width: 100%; height: 100%; overflow: scroll;} html::-webkit-scrollbar, body::-webkit-scrollbar{width:0px;height:0px;} body{margin:0;}
这样移动端右侧默认滚动条就隐藏了。如果只是隐藏某个标签内出现的滚动条单独给予样式::-webkit-scrollbar{width:0px}即可,不用设置上述样式。
移动端将body{height:100%,width:100%},也是有弊端的,这样会导致document.body.scrollTop,window.pageYOffset的滚动条滚动距离获取会失效。我会在之后发表一篇解决办法。
只测试了3个手机浏览器,百度浏览器能用Chrome方法隐藏。火狐就用PC端那个方法。华为手机自带浏览器,用Chrome方法可以完全隐藏,用火狐样式可以隐藏右侧滑块,但无法隐藏浏览器上下箭头滑块。
关于滚动条的问题也能通过一些插件解决。本人还未用过,暂时不提,可以查看别人的文章。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库