我有一些装饰性的元素是绝对的位置,他们的一部分去了屏幕的一边。
我用body { overflow-x: hidden; }
解决了这个问题,它通常似乎可以工作。然而,在移动的上,溢出的装饰性元素创建水平滚动条,并且例如在移动设备上创建水平滚动条。标题中右对齐的移动的菜单控件完全在视口之外。
我看到一些帖子建议html, body { overflow-x: hidden; }
,但当我尝试这个时,它修复了移动的问题,但在所有上下文中创建了一个不稳定的垂直滚动。这就像你必须垂直滑动一次,屏幕会在右下方出现一个全高滚动条。然后再快速滑动,滚动条就工作了。
我错过了最初的问题,因为我是用一个狭窄的浏览器窗口而不是适当的移动的仿真进行测试的。我已经看到一些关于 meta'viewport'标签的影响的提及,一个解决方案是在body
内立即添加一个 Package 器div
,并将overflow-x
应用于此-但是,虽然它修复了移动的水平滚动,但它保留了上述摇摇欲坠的垂直滚动问题。
作为参考,我的 meta标签是<meta name="viewport" content="width=device-width, initial-scale=1.0">
。
我已经从搜索中找不到可以尝试的东西了,有什么想法吗?
更新:不幸的是,这很难复制。我已经创建了a pen来显示它们(overflow-x:hidden
只是在html
上)。最好在新选项卡中单独打开预览窗格。然后如果你只是缩小视口到移动的宽度,你会看到红色的东西在右上角,没有水平滚动。但是如果你进入移动的仿真,它就不起作用了。这是通过将overflow-x:hidden
添加到body
来修复的-但随后我得到了垂直滚动不稳定的问题(在现场)。一定有一些模糊的现场是造成这一点-我会继续寻找,并试图复制。
1条答案
按热度按时间q5iwbnjs1#
问题原来是页脚中的一些CSS。这里的关键是系统地检查DOM检查器中的所有元素,并删除单个元素,直到找到问题所在。也许应该先尝试一下--在构建一个复制问题的代码示例失败后,我只移动到 * 删除 * 元素来查找问题,* 添加 * 元素来查找问题。