猫头鹰轮播错误：在移动 Safari 上滑动整个页面 - iPhone答案

【问题标题】：Owl Carousel Error: Sliding Entire Page On Mobile Safari - iPhone猫头鹰轮播错误：在移动 Safari 上滑动整个页面 - iPhone
【发布时间】：2017-04-20 10:18:39
【问题描述】：

所以我目前正在处理http://coin.codeclimb.com，由于某种原因，主页上的猫头鹰轮播滑块无法在 iPhone safari 上运行。当我在 iPhone 上滑动时，它会滑动整个页面上的所有内容并破坏内容。我无法在桌面上复制问题。因此我无法使用开发工具来识别问题。

就好像只有2张幻灯片有15张一样，它只是让你滑动，你滑动的越多，它就会将整个页面上的所有内容推得越远，包括导航。

有什么想法吗？我在 iPhone 7 Plus 上使用 Safari。

【问题讨论】：

您可以使用 mac 上的 safari 在移动设备上检查 safari：webdesign.tutsplus.com/articles/…
就是这样。我的 Mac 上的 Safari 没有问题。它只是 iPhone 设备。在 iPhone 7 plus 和 iPhone 6 plus 上试过，同样的问题。桌面上的 Safari 运行良好
是的，但是如果您将 iphone 连接到您的 mac，使用 safari（桌面）您可以在 ios 上检查 safari。看看我之前发布的链接。
请提供足够的代码来重现场景。并通过 - stackoverflow.com/help/how-to-ask
在 Iphone 8 上，Chrome 上似乎也发生了同样的事情！我不得不将overflow-x 放在owl-carousel 的父元素上；如果它只是在身体上，它仍然不起作用。

标签： javascript html css owl-carousel

【解决方案1】：

这里有几个问题：

overflow-x:hidden 不适用于某些版本的移动 safari 中的 body 元素。这意味着您的内容从其容器中水平溢出。这会使浏览器感到困惑，因为它不知道应该滚动哪个元素。
您已从owl.css 的第77 行删除overflow:hidden，并添加了style.css 文件的第1121 至1134 行，直接影响OwlCarousel 的功能。

最简单的解决方案是将overflow-x:hidden 添加到html 元素而不是body 元素，并从style.css 中删除多余的行

【讨论】：

【解决方案2】：

就我而言，即使是 html 元素上的 overflow-x: hidden 也不起作用。
相反，我在主体上添加了额外的填充（两侧 20 像素），这解决了问题，即使在小屏幕设备（iphone SE）上也能正常工作

【讨论】：