以編程方式停止-webkit溢出滾動

Question

我有一個phonegap應用程序，使用iOS本地滾動通過-webkit-overflow-scrolling在div中。我希望能夠在用戶單擊按鈕（要滾動回頁面頂部）時手動停止正在進行的滾動。這是可行的嗎？

Answer 1

不幸的是，目前尚不可能。僅當滾動結束時纔會觸發scroll事件。只要動力不斷移動，內容就會被觸發。您可以在Apple的「Safari網頁內容指南」中的Figure 6-1 The panning gesture中看到此內容。

我也創建了一個fiddle to demonstrate這種行爲。在之後，scrollTop的值設置爲iOS完成動畫。

Answer 2

當使用fastclick.js時，這實際上是非常可能的。該庫消除了移動設備上的300毫秒點擊延遲，並可在慣性/動量滾動期間實現事件捕獲。

包括fastclick並將其連接到body元素後，我的代碼來停止滾動，進入到頂部看起來是這樣的：

scrollElement.style.overflow = 'hidden'; 
scrollElement.scrollTop = 0; 
setTimeout(function() { 
    scrollElement.style.overflow = ''; 
}, 10); 

關鍵是要設置overflow: hidden，該停止的慣性/氣勢滾動。請看我的小提琴全面實施stop scrolling during inertia/momentum。

Answer 3

您可以使用'touchstart'而不是'click'來捕捉觸摸事件，因爲在動量滾動完成之前，點擊事件似乎不會被觸發。試試這個jQuery的解決方案：

$('#yourTrigger').on('touchstart', function() { 
    var $div = $('.yourScrollableDiv'); 
    if ($div.scrollTop() === 0) { 
     return false; //if no scroll needed, do nothing. 
    } 
    $div.addClass('scrolling'); //apply the overflow:hidden style with a class 
    $div.animate({ 
     scrollTop: 0 
    }, 600, function() { 
     $div.removeClass('scrolling'); //scrolling has finished, remove overflow:hidden 
    }); 
} 

在「滾動」類只是有CSS屬性，溢出：隱藏，這是@帕特里克 - 魯道夫說，將暫停所有的勢頭正在滾動。

.scrolling { 
    overflow: hidden; 
} 

注意：最好使用回調函數來告訴滾動動畫何時完成，而不是設置定時器功能。