iOS 上的 Safari 仅在滚动停止后显示固定元素

Posted 2023-03-12

【中文标题】iOS 上的 Safari 仅在滚动停止后显示固定元素

【英文标题】：Safari on iOS only showing fixed elements after scroll stopped

【发布时间】：2015-10-20 14:39:48

【问题描述】：

我正在编写一个“返回顶部”按钮，该按钮应仅在用户向下滚动我的网页时可见，并在用户向上滚动时隐藏。

规则是这样的：

如果页面 scrollTop > 100px 则显示按钮 如果页面 scrollTop 为

在 ios9 (iPad mini) 上使用 Safari 运行该页面时，该按钮仅在滚动动画结束时显示，但在向上滚动达到滚动限制时立即隐藏。

您可以在此处查看我的操作示例： http://jsfiddle.net/jkwqq59a/

html：

<div class="container">
   <div class="box"></div>
</div>

CSS：

.container 

    position: relative;
    height: 3000px;
    background-color: blue;    

.box

    display: none;
    position: fixed;
    left: 50px;
    top: 50px;
    width: 50px;
    height: 50px;
    background-color: yellow;    

JS：

$(window).on('scroll', function()

     if ($(window).scrollTop() > 100 && !$('.box').is(':visible'))
         $('.box').show();
     else if ($(window).scrollTop() <= 100 && $('.box').is(':visible'))
         $('.box').hide();
);   

我的问题是：在 iPad 上，为什么按钮只在向下滚动完成后才显示，而它在向上滚动时立即隐藏？我怎样才能让它立即显示，就像在我的 Mac 上使用任何网络浏览器一样？

【问题讨论】：

我认为这是因为事件在滚动停止之前不会触发。请参阅“浏览器兼容性”部分 here：“在 iOS UIWebViews 中，滚动事件不会在滚动发生时触发；它们仅在滚动完成后触发。请参阅 Bootstrap 问题 #16202。Safari 和 WKWebViews 不受这个错误。”

滚动事件实际上在滚动过程中被触发了多次，我做了一些console.log，它在滚动过程中记录了一千次。此外，该按钮在向上滚动后也会隐藏，但是当 scrollTop 达到 100px 时它会立即隐藏，这意味着该事件被触发了很多次。

@Voxen 你用什么浏览器记录滚动事件？

我在 Mac 上使用 Safari，使用 iPad 的远程控制台

【参考方案1】：

我之前遇到过同样的问题，我的解决方法是没有将固定位置的容器放入固定位置的容器中。这意味着单独的固定元素可以正常工作，但不能嵌套。