网页上的水平滚动在 iOS 中不起作用

Posted 2023-03-14

【中文标题】网页上的水平滚动在 iOS 中不起作用

【英文标题】：Horizontal Scroll on a webpage not working in iOS

【发布时间】：2013-04-10 14:00:14

【问题描述】：

请在桌面浏览器上查看以下网站。 http://www.onebyinfinity.co.nz/m/ - 你会看到一个水平滚动条

但在 iPad 或 iPhone 上打开时，水平滚动不起作用。该网站的水平滚动在 android 浏览器上运行良好，但在 ios 设备上，当用户左右滑动时，Safari 拒绝水平滚动。

我需要做什么才能在 iOS Safari 上启用水平滚动吗？请注意，我不希望滑动事件（我已经在网站的主页上这样做了，我对性能不满意）。我只想让滚动条按预期工作。

谢谢， 阿伦。

【问题讨论】：

也许你想要 jquery 插件。 touchswipe labs.rampinteractive.co.uk/touchSwipe/demos 非常适合移动设备

我已经在网站的主页上做到了。这有效，但并不顺利。所以我添加了这个页面。它在 Android 上运行得非常好，但在 iOS 上却不行。

我怀疑您是否尝试过 @KeesSonnema 链接的插件。这是一个非常好的。甚至比 Tiny Scrollbar 更好（因为支持的事件更多）

Brainfeeder，在这个网站的主页上，我捕获了一个滑动事件，并通过更改左边距来手动滚动页面。当您按向左或向右箭头键时，您可以在桌面浏览器中看到动画。我的客户对此并不满意。我只是问为什么 iOS 浏览器不像 Android 浏览器那样水平滚动。

@Arun 在 Firefox 中，当我使用左箭头或右箭头时没有滚动。在照片库中，如果单击向下按钮，则看不到下一个水平滚动条（它从屏幕上掉下来）。所以我不能在那里滚动。也许如果您将一些代码放在这里，我们可以帮助您了解为什么 iOS-safari-does-not-scroll .. 只是说，如果您使用现成的插件，您在所有网站上制作网站的麻烦都会减少平台。

【参考方案1】：

要触发滑动事件，您需要 jQuery mobile 库。或者使用像 Tiny Scrollbar 这样的插件，这可能是更适合您网站的解决方案，因为它已经内置了移动支持。

【讨论】：

我已经在网站的主页上做到了。这有效，但并不顺利。所以我添加了这个页面。它在 Android 上运行得非常好，但在 iOS 上却不行。

我在我的网站上使用它，效果很好