移动端隐藏滚动条，css⽅法
⼩⽩第⼀次发⽂记录⾃⼰遇到的问题。
关于隐藏移动端滚动条⽅法很多，这⾥只说本⼈⽤到的。
在PC端隐藏html右侧默认滚动条
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横向滚动条样式
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⽅法可以完全隐藏，⽤⽕狐样式可以隐藏右侧滑块，但⽆法隐藏浏览器上下箭头滑块。
关于滚动条的问题也能通过⼀些插件解决。本⼈还未⽤过，暂时不提，可以查看别⼈的⽂章。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。