解决移动端页面出现 X轴横向滚动条问题

最近在用 Bootstrap 写一个需要适配 WEB 和 WAP 的网站,写完后发现 WAP 端总是会出现横向滚动条,也就是 X 轴滚动条,导致 WAP 端页面左右滑来滑去,很是令人蛋疼,即使设置了 overflow-x: hidden和 width:100% 也无法去除,通过各种途径寻找解决方法,最终在 张鑫旭 大神的一篇文章里找到了最终解决方法,在这里记录一下防止之后自己用得到时还需要重新找,也为那些同样有这方面问题的童鞋提供方便。

 

出现这种问题的主要原因就是,由于内容较多导致出现Y轴滚动条,占用了页面的宽度,从而导致在使用框架做自适应时出现X轴滚动条,影响用户体验。最终只需要在CSS中添加如下代码就可以完美解决,以后妈妈再也不用担心我的代码会出现横向滚动条了。

 

代码:

 

html {

  overflow-y: scroll;

}

 

:root {

  overflow-y: auto;

  overflow-x: hidden;

}

 

:root body {

  position: absolute;

}

 

body {

  width: 100vw;

  overflow: hidden;

}

内容参考自 张鑫旭大神的《小tip:CSS vw让overflow:auto页面滚动条出现时不跳动》

————————————————

版权声明:本文为CSDN博主「喵了__个咪」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/zx562602419/article/details/81293405

解决移动端页面出现 X轴横向滚动条问题

posted @ 2020-02-05 21:45  行方思远  阅读(141)  评论(0编辑  收藏