Bootstrap Body Overflow - 使用 overflow-x 会产生移动滚动问题

Question

我或多或少地为客户完成了一个简单的引导站点，但是我遇到了一个问题，即 body 元素的右侧似乎有一个额外的 160 像素！我已经花了大约 3 个小时试图找到答案。

为了部分解决这个问题，我在头部添加了以下 css：

html, body { overflow-x: hidden;}

这消除了额外的 160 像素，但在移动设备（仅测试 iOS）上，滚动动作现在令人难以置信的粘性 - 而不是我们期望在移动设备上的流畅滚动。现在，当手指离开屏幕时，页面就停止了，而不是快速滑动手指使页面继续滚动。

就用户体验而言，这确实是不可接受的，尝试和解决起来确实很痛苦。

我把这个网站放在这里让你在手机上试试看“粘性”goo.gl/yEI3rn

在桌面上，您可以使用检查器禁用溢出-x:hidden;在 body 上查看右侧的额外像素。

如果有人可以调查该网站并告诉我以下任何一项，那将非常有用：

1. 正文中的哪个元素导致正文有额外的宽度？
2. 为什么 body 元素有多余的宽度？
3. 是否存在不会产生移动滚动问题的 overflow-x 替代方法？
4. 还有其他需要调查的领域以尝试解决此问题吗？

非常感谢您在这里提供任何见解！

Answer 1

您可以尝试将其添加到您的 css 中，以查看哪个元素一直运行：

 * {
   outline: 1px solid right;
 }