移动端隐藏滚动条,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,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的滚动条滚动距离获取会失效

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值