欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

移动端隐藏滚动条,css方法

程序员文章站 2022-04-15 09:12:18
小白第一次发文记录自己遇到的问题。 关于隐藏移动端滚动条方法很多,这里只说本人用到的。 在PC端隐藏html右侧默认滚动条 火狐和ie/Edge的样式会使页面内所有滚动条隐藏。Chrome只会隐藏右侧默认滚动条,想要隐藏某个标签内滚动条要单独给予样式::-webkit-scrollbar{width ......

  小白第一次发文记录自己遇到的问题。

  关于隐藏移动端滚动条方法很多,这里只说本人用到的。

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

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