在视口中检测元素不适用于移动 Safari

Posted 2023-03-14

【中文标题】在视口中检测元素不适用于移动 Safari

【英文标题】：Detecting element in viewport does not work on mobile safari

【发布时间】：2017-08-16 11:44:16

【问题描述】：

我使用this Answer 中的简单实用功能 来检测元素是否在我的视口中。如果是，则会为我的内容启动淡入动画。

它适用于 Windows、macOS、Android 和 ios 上的所有浏览器Safari 除外。在 Safari 中，内容保持隐藏状态，动画仅在我尝试缩小网站后开始。我在 iOS 10 和 11 Beta 5 上对此进行了测试。

我对这个问题的解决方案是检测用户是否在 iOS 上使用 Safari 并且不对我的内容进行动画处理。但我想解决这个问题，以便动画工作。谁能帮我解决这个问题？

编辑： 我认为这个问题是由 Semantic-ui 引起的。用纯 html 和 javascript 对其进行了测试，它可以工作。我现在尝试修复它。

【参考方案1】：

我终于找到了解决办法。

问题在于语义 UI 中的侧边栏。我在文档上找到了CSS snipped。我稍微修改了代码并将其添加到我的 css 文件中。

html.ios 
    overflow-x: hidden;
    -webkit-overflow-scrolling: auto !important;

html.ios,
html.ios body 
    height: initial !important;

似乎是-webkit-overflow-scrolling 引起了问题。但我也必须添加其他代码行，否则滚动时会卡顿。

这样，一切正常！