iOS Safari瀏覽器：下拉與彈跳

我的團隊和我正在開發一個帶有固定標頭但不滾動的Web應用程序。iOS Safari瀏覽器：下拉與彈跳

爲了處理iOS上的超滾動，我們需要檢測負方向的滾動並將固定標題重新定位爲靜態，以使其與頁面的其餘部分一起滾動。
我們以一個jQuery的滾動處理結合window做到這一點：

$(window).scroll(function() { 
    if ($(window).scrollTop() < 0) { 
     // position static header postioning in order 
     // let the header behave correctly when overscrolling 
    } 
});

這種運作良好，當頁面手動拉（拖）下降。但是，每個iOS用戶都知道，當從一個向下的位置再次加速滾動頁面時，它會一旦達到其頂部就會反彈（超卷）。

在這種情況下，我們的滾動處理不起作用。

此刻，我能想象有兩個原因，爲什麼會出現此不同的行爲：向上

快速滾動，並製作網頁反彈，太快了Safari瀏覽器的JS引擎，以保證流體處理
在技術上向上滾動與手動拉下網頁相同時彈跳？關於$(window).scrollTop()？

有沒有人有一些提示如何使我的滾動處理在這兩種情況下工作？

來源

2016-03-23 Windwalker

如果在CSS中position:fixed不適合你，那麼你應該嘗試做一個繪製循環，並且每循環一次，你就會放置一個水平偏移量，等於用戶滾動的距離。

基本上，你的JS應該是這樣的，如果CSS不起作用：

var head = document.getElementById("header"); 
//head now has our header 
head.style.position = "relative"; 
//and now, we can manipulate it's position 
function draw(){ 
    head.style.top = window.pageYOffset; 
    //all that's left to do is do this each and every frame. 
}

如果你不知道如何做一個平局循環，下面的代碼：

var frameRate = 60; 
var frameCounter = (function(){ 
    var counter = 0; 
    return function(){ 
     counter ++; 
     if(counter > frameRate/1000){ 
      counter -= frameRate/1000; 
      draw(); 
     } 
    } 
})(); 
setInterval(frameCounter, 1);

來源

2016-03-23 14:19:35 hellol11

感謝您的回答！由於這個循環是永久運行的，即使頁面沒有滾動，你不認爲這可能會導致性能問題嗎？ – Windwalker

感謝您的回答！它比使用純CSS做得更好。看起來好像僅僅設置CSS類來觸發光學變化，在快速滾動時不夠快。不過，我會欣賞一些關於性能方面的暗示...... – Windwalker

@Windwalker可能需要更多代碼，例如檢測用戶滾動的時間。 – hellol11

這已在iOS 9.3中解決新元標記選項

<meta name="viewport"content="width=device-width,shrink-to-fit=no">

來源

2016-04-13 14:45:00

見：https://developer.apple.com/library/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_1.html#//apple_ref/doc/uid/TP40014305-CH10-SW8 –

感謝您的回答，但在哪裏是（上）滾動/反彈的參考？ – Windwalker

iOS Safari瀏覽器：下拉與彈跳

回答

相關問題