美文网首页
PC端和移动端超出部分滚动条隐藏

PC端和移动端超出部分滚动条隐藏

作者: Amanda妍 | 来源:发表于2021-07-09 17:48 被阅读0次

    在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::-webkit-scrollbar, body::-webkit-scrollbar{width:0px;height:0px;}
    body{margin:0;}
    

    这样移动端右侧默认滚动条就隐藏了。如果只是隐藏某个标签内出现的滚动条单独给予样式::-webkit-scrollbar{width:0px}即可,不用设置上述样式。

    相关文章

      网友评论

          本文标题:PC端和移动端超出部分滚动条隐藏

          本文链接:https://www.haomeiwen.com/subject/ufnfpltx.html