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瀏覽器僅顯示滾動停止後的固定元素

回答

相關問題