在PC端隐藏html右侧默认滚动条 html { /隐藏滚动条，当IE下溢出，仍然可以滚动/ -ms-overflow-style:none; /火狐下隐藏滚动条/ scrollbar-width: none; } /Chrome下隐藏滚动条，溢出可以透明滚动/ html::-webkit-scrollbar{width:0px} 火狐和ie/Edge的样式会使页面内所有滚动条隐藏。Chrome只会隐藏右侧默认滚动条，想要隐藏某个标签内滚动条要单独给予样式::-webkit-scrollbar{width:0px}。

    移动端隐藏滚动条

    上面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方法可以完全隐藏，用火狐样式可以隐藏右侧滑块，但无法隐藏浏览器上下箭头滑块。

    关于滚动条的问题也能通过一些插件解决。本人还未用过，暂时不提，可以查看别人的文章。

    链接：https://blog.csdn.net/weixin_35117981/article/details/118287977