移动端隐藏滚动条（最全面）

1）给滚动条的部分设置宽高为100%， overflow-y: auto; 2）设置滚动条的部分::-webkit-scrollbar{ width: 0; display:none; }

在PC端隐藏html右侧默认滚动条 html {/*隐藏滚动条，当IE下溢出，仍然可以滚动*/ -ms-overflow-style:none;/*火狐下隐藏滚动条*/ scrollbar-width: none;}/*Chrome下隐藏滚动条，溢出可以透明滚动*/ html::-webkit-scrollbar{width:0px} 移动端隐藏滚动条 ie/Edge的样式会使页面内所有滚动条隐藏。Chrom...

前端 _ CSS 如何实现隐藏移动端页面的滚动条

1.原因 当然是滚动条长得丑才需要隐藏啊，真是开玩笑~~~QAQ而且也抵挡不住产品的吐槽，硬着头皮上了。 2. 方法 1.使用CSS3的transform:translate配合padding和margin使用。（只支持CSS3的浏览器，来自百度的方法。） 2.使用原生的position: realtive配合padding和margin使用。（我自己写的，测试无兼容性问题） 3

不废话，上代码 在你要隐藏的元素上加个div给定样式 overflow:hidden; 在要隐藏的元素身上加如下样式即可 overflow-y:scroll; height:calc(100vh);

::-webkit-scrollbar { display: none; }

直接上代码，就几行。

移动端隐藏滚动条

存在兼容性问题overflow兼容性最好，也最直观，符合大多数人思路，缺点是需要单独嵌套一层父级clip实现最简洁，也比较好理解，在本案例中最为推荐mask思路和clip一致，实现起来稍微复杂一点，还可以实现更为复杂的渐隐效果，能够掌握更好。

::-webkit-scrollbar {/隐藏滚轮/ display: none; } 一般搜到的方法是这样，给各位演示一下： 这样会挡住一些小图片很难受，加入隐藏滚轮后效果如下： 就很舒适，这其中也有一些小坑，比如说写法上是 此时这个.song_list与::-webkit-scrollbar直接是不能空格的，空格就效果显示不出来，但如果是ul上面的div标签的话来加这个隐藏滚动条属性的话中间就可以空格，这一点让我实在纳闷。 但这只是一个小坑，我遇到的问题呢是火狐浏览器没法正确使用这个方法来隐藏滚动条

比较好用的一种是 在有滚动条的容器A外，再包裹一层容器B 容器B的高度小于容器A的高度，容器B设置 overflow:hidden; 以此来隐藏滚动条