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

我正在编写一个“返回顶部”按钮，该按钮仅当用户向下滚动网页时才可见，并在用户滚动时隐藏。iOS上的Safari浏览器仅显示滚动停止后的固定元素

的规则是这样的：

如果页面scrollTop的是> 100像素，则该按钮被示
如果页面scrollTop的是< = 100像素，则该按钮被隐藏

当在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上的任何网络浏览器一样？

来源

2015-10-20 Voxen

我认为这是因为事件不会触发，直到滚动停止。请参阅“浏览器兼容性”一节[此处]（https://developer.mozilla.org/en-US/docs/Web/Events/scroll）：“在iOS UIWebViews中，滚动发生时不会触发滚动事件。它们仅在滚动完成后才被触发，请参阅Bootstrap问题＃16202。Safari和WKWebViews不受此错误的影响。“ – Anders

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

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

我以前有同样的问题，我的修复程序没有固定位置容器放入固定位置容器。这意味着固定的元素独自工作正常，但没有嵌套。

来源

2015-12-07 16:37:52

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

回答

相关问题