手機瀏覽器中$（window）.scroll事件的觸發率

我使用$(window).scroll()事件來爲我的元素添加動畫。

在桌面瀏覽器中，當鼠標是滾動時觸發事件。
在移動瀏覽器中，當拖動&觸摸具有結束時觸發事件。

有什麼辦法可以在觸摸拖動的時候觸發scroll()事件（向下滾動/向上滾動）？

示例代碼：

$(window).scroll(function(){ 
    console.log('fired'); 
});

最後，這裏有一個demo page（不能在移動使用的jsfiddle很好，因而我別處承載它）。請在桌面上嘗試一下&移動瀏覽器。爲方便起見，這裏是QR碼：

enter image description here

來源

2014-01-11 Raptor

我有點覺得綁定'touchmove'可以幫助 – Alexander

@Alexander它不會幫助當我們有動力滾動 – Dan

@丹，夠公平的。雖然，這個問題不是關於動態滾動 – Alexander

我一直在玩的手機和觸摸最流行的瀏覽器捕捉實時滾動設備超過一週！

我試圖像把setInterval或環或捕捉scroll或touchmove或網絡工作者或任何許多方法。我可以告訴你，在iOS 4 - 7上沒有任何工作，瀏覽器只會凍結任何腳本執行。適用於Android的瀏覽器，移動Chrome或Firefox或海豚跟蹤scroll好吧，您可以在這裏處理動態滾動。最新的Internet Explorer移動版，Blackberry，Opera移動版以及大多數Symbian瀏覽器也跟蹤scroll。

但是，在iOS上有一種很棒的方式來做事。這個人模仿使用CSS3滾動transform: translateY：https://github.com/joehewitt/scrollability/blob/master/scrollability.js實際上，JavaScript/CSS完全模擬iOS Safari本身的功能。

由於使用GPU加速度而沒有任何延遲，並且沒有任何限制。您甚至可以更改滾動參數，如摩擦或響應度。缺點是你只需要爲iOS提供其他樣式或標記。您可以使用媒體查詢或瀏覽器檢測。請在網上查找一些演示，因爲作者沒有提供明確的文檔。例如：stellar.js iOS Paralax演示。還有其他一些例子可用。

跟蹤當前滾動位置使用這樣的事情：

var page = document.getElementById('page'); 

var scrollTop = isIOS ? 
    -(new WebKitCSSMatrix(getComputedStyle(page).webkitTransform)).m42 : 
    window.scrollY;

消防這裏面requestAnimationFrame循環。不幸的是，你不能在這個版本的庫中使用WebKitCSSMatrix更優雅的方式獲取滾動座標。但你可以爲此做出拉取請求。

希望這會對你有用！

來源

2014-05-06 14:19:25 Dan

非常詳細的答案，謝謝！ – Raptor

你可能想用這個：

document.addEventListener("touchmove", touchScrollHandler, false);

來源

2014-01-11 04:01:46 joseeight

你能詳細說明一下嗎？ 'touchScrollHandler'也沒有定義。我的問題是關於jQuery，而不是傳統的JavaScript。另外，對於'touchmove'事件，它在桌面瀏覽器中的表現如何？ – Raptor

對不起，我假設普通的JavaScript沒問題，touchScrollHandler是一個你定義的普通函數，會得到一個事件，然後你可以通過檢查頁面的滾動位置來計算滾動位置。下面是一個jQuery實現，它對你更有意義：http://forrst.com/posts/jQuery_iPad_one_finger_scroll-B30 – joseeight

嘗試了''（'body'）。on（'touchmove'）'，它的行爲與' scroll（）' – Raptor

手機瀏覽器中$（window）.scroll事件的觸發率

回答

相關問題