移动端布局初次进入页面，页面右侧出现空白区域

[星离～]

最近一直在写一些移动端的页面，在这个过程中也是遇到了许多的问题，有些很容易就可以解决，但有些问题知道出现在哪里，但是还是无法避免，就像今天要说到的这个问题移动端布局初次进入页面，页面右侧出现空白区域，这个问题我觉得大家应该是遇到过的，所以今天就一起来探讨一下这里边的原因。

一、原因

这个问题初步判断产生的原因就是 ，在页面没有缩放到移动端设备大小的时候，所有元素的宽度都是刚刚好的，但是当我们突然切换到移动端设备大小的时候就会有这样的问题，当时我初步判断这可能是由于pc端的滚动条所导致的，所以我就做出了一些调整，例如以下：

html{
    overflow-x: hidden;
}

在我的代码中添加了以下的代码，之后呢发现问题依然存在，这就让我的思路崩塌了。就在这个时候，哇，我周围的朋友和我说是不是需要直接将滚动条直接删除掉啊，例如：

:root::-webkit-scrollbar{
    display: none;
}

果然，当我再次将这个代码输入的时候，再次去查看，果然有效，到这里我的问题也算是得以解决，所以总结一些，当我们遇到这样的问题，目前我初步的方法就是将滚动条进行隐藏，达到初步的一个页面效果，如果有朋友遇到了这种问题，希望我的文章对你们有些帮助和启发，如果有更好的方法，可以留言到评论区，感谢搭建的阅读，今天我们就说到这里，谢谢！！