0
点赞
收藏
分享

微信扫一扫

移动端页面隐藏滚动条

sullay 2022-04-13 阅读 153
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,bodywidth和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的滚动条滚动距离获取会失效。

举报

相关推荐

0 条评论