禁用iPhone左右滑动以移动页面

Question

我会尽力解释这个问题。如果你在任何iPhone上打开target.com或amazon.com，尝试向左或向右滑动页面，页面不会移动。我目前有一个网站，只有主页可以左右滑动。如果你松手，屏幕会跳回中间，但这仍然很烦人。这只发生在iPhone上，并且与iPhone 7的左右滑动回退功能无关。唯一解决方法是缩小页面，然后当它恢复正常时，才能防止左右滑动。这里是网站链接：airlinehyd.com。

是否有一种通过jQuery或CSS关闭此功能的方法？我已经尝试将overflow-x: hidden;添加到body中，但没有效果。有什么想法吗？

- xohbrittx

Answer 1

html {
overflow: hidden;
/* height: 100%; I commented out this declaration because it messes up your scrolling */
}

body {
height: 100%;
overflow: auto;
}

来源: 防止网页"overscrolling"

在推向生产环境之前，请确保在所有浏览器和移动设备上进行测试，但它在iPhone上可以工作。

- Kyle Vassella

---

这个可以按照我的要求工作，但是在使用检查工具时会阻止滚动，所以我必须找到另一个解决方案。 - xohbrittx

不要将这些规则添加到包含类或ID的选择器中。确保您的选择器只是 html {} 和 body{} - 在您的CSS底部创建这些新规则以确保。并且为了安全起见，从body中删除旧的 overflow-x: hidden。在我的iPhone上使用Safari移动Web检查器时，此修复程序对您的网站有效，并且在实施时不会破坏您的滚动。 - Kyle Vassella

你可能在我注释掉 html {} 内的 height: 100% 之前就尝试过我的解决方案 - 请查看我的更新答案中灰色区域。当我在 html {} 选择器中包含 height: 100%; 时，这会稍微影响到你的滚动效果。当我将其注释掉后，它就像魔法一样正常工作了。或者，也许你正在尝试这个开发环境与你指向我们的现场不同。如果你已经尝试过我的上面的解决方案并注释掉了 height: 100%，请尝试取消注释并查看是否可以正常工作。 - Kyle Vassella