必须在 ios Safari 浏览器的底部点击两次

Posted 2023-03-21

【中文标题】必须在 ios Safari 浏览器的底部点击两次

【英文标题】：Have to tap twice on bottom part in ios safari browser

【发布时间】：2021-06-28 13:40:24

【问题描述】：

我的网站底部有一个按钮。在 Safari 浏览器中的 ios 设备上，当我尝试单击它时，它首先会打开浏览器的页脚部分，然后我必须再次点击才能单击该按钮。如何一键点击按钮？ 参考这个GIF：https://i.stack.imgur.com/HyciL.gif

【参考方案1】：

height: 100vh（这会将您的内容设置为最大可能的高度） overflow-y: scroll（这将使该 div/元素可滚动，因此浏览器不会在实际滚动时注意到您正在滚动。）

由于 ios safari 的默认行为，当您在页面上滚动时，它会自动隐藏浏览器的页眉和页脚。现在，如果您的网站底部有一个按钮，则必须点击两次才能使其正常工作。第一次点击将触发 safari 页脚部分（假设您想打开页脚部分），第二次点击实际上会触发按钮上的点击事件。

导致问题的主要原因之一是，每当您滚动时，Safari 都会注意到您已滚动并且您将继续滚动。为了向您展示网站上的最大内容，它隐藏了页脚和地址栏。这就是为什么必须使用overflow-y: scroll。

附言 因为您现在在 div/element window.addEventListener('scroll', function()) 内滚动将不再起作用。要解决这个问题，您可以使用document.getElementById('your-div-id').addEventListener('scroll', function())

除了这个window.pageYoffset 将永远为0。要获取pageYOffset，您可以使用添加了overflow-y:scroll 的div 的getBoundingRect 属性。

例如：scrollPosition = document.getElementById('your-div-id').getBoundingClientRect().top 这将为您提供从 div 顶部到滚动的高度。

调试愉快