Yijen's blog

關於部落格
繪圖 | 食記 | Web前端技術 | HTML | CSS | JavaScript 研究
  • 324196

    累積人氣

  • 60

    今日人氣

    0

    訂閱人氣

How to detect scrolling stopped with javascript (偵測頁面捲動及結束捲動)

Code (Need jQuery)

var scrollCheckTimer = null,
    scrollDelay = 250;      
$(window).scroll(function(){
    clearTimeout(scrollCheckTimer); 
    // do something while scrolling
    scrollCheckTimer = setTimeout(function(){
        // do something when scrolling stopped
    } , scrollDelay );
});

Demo

detect scroll

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa nemo commodi porro laborum aut voluptatibus ut necessitatibus odio illum aliquid esse dolores deleniti mollitia fugit doloribus. Ratione voluptatem architecto unde.

Obcaecati ducimus vitae consequatur autem eius? Temporibus dolorem ut perspiciatis quia pariatur praesentium quae numquam minima deleniti adipisci eveniet enim error ratione ipsa sit obcaecati qui officiis vero. Aliquam consectetur?

Rerum cumque ipsum vel aliquid possimus voluptatem et! Similique corporis a impedit debitis molestias voluptas alias nisi consectetur ipsam architecto omnis ad blanditiis cum aliquid doloremque itaque ratione. Magnam dicta.

Eum cupiditate officiis harum pariatur eveniet veniam unde quidem corporis quam consectetur. Labore veniam autem harum ducimus consequatur cupiditate mollitia officiis iste. Ratione amet dignissimos molestiae odio tempora corporis nam!

Culpa porro animi rem quibusdam dolorum nesciunt itaque blanditiis facere quisquam quae. Illum rem qui possimus quo officia distinctio beatae optio nihil soluta deleniti dignissimos ipsam veniam molestias numquam perferendis?

Rerum cumque ipsum vel aliquid possimus voluptatem et! Similique corporis a impedit debitis molestias voluptas alias nisi consectetur ipsam architecto omnis ad blanditiis cum aliquid doloremque itaque ratione. Magnam dicta.

Eum cupiditate officiis harum pariatur eveniet veniam unde quidem corporis quam consectetur. Labore veniam autem harum ducimus consequatur cupiditate mollitia officiis iste. Ratione amet dignissimos molestiae odio tempora corporis nam!

Culpa porro animi rem quibusdam dolorum nesciunt itaque blanditiis facere quisquam quae. Illum rem qui possimus quo officia distinctio beatae optio nihil soluta deleniti dignissimos ipsam veniam molestias numquam perferendis?

Rerum cumque ipsum vel aliquid possimus voluptatem et! Similique corporis a impedit debitis molestias voluptas alias nisi consectetur ipsam architecto omnis ad blanditiis cum aliquid doloremque itaque ratione. Magnam dicta.

Eum cupiditate officiis harum pariatur eveniet veniam unde quidem corporis quam consectetur. Labore veniam autem harum ducimus consequatur cupiditate mollitia officiis iste. Ratione amet dignissimos molestiae odio tempora corporis nam!

Culpa porro animi rem quibusdam dolorum nesciunt itaque blanditiis facere quisquam quae. Illum rem qui possimus quo officia distinctio beatae optio nihil soluta deleniti dignissimos ipsam veniam molestias numquam perferendis?

Culpa porro animi rem quibusdam dolorum nesciunt itaque blanditiis facere quisquam quae. Illum rem qui possimus quo officia distinctio beatae optio nihil soluta deleniti dignissimos ipsam veniam molestias numquam perferendis?

Rerum cumque ipsum vel aliquid possimus voluptatem et! Similique corporis a impedit debitis molestias voluptas alias nisi consectetur ipsam architecto omnis ad blanditiis cum aliquid doloremque itaque ratione. Magnam dicta.

Eum cupiditate officiis harum pariatur eveniet veniam unde quidem corporis quam consectetur. Labore veniam autem harum ducimus consequatur cupiditate mollitia officiis iste. Ratione amet dignissimos molestiae odio tempora corporis nam!

Culpa porro animi rem quibusdam dolorum nesciunt itaque blanditiis facere quisquam quae. Illum rem qui possimus quo officia distinctio beatae optio nihil soluta deleniti dignissimos ipsam veniam molestias numquam perferendis?

Culpa porro animi rem quibusdam dolorum nesciunt itaque blanditiis facere quisquam quae. Illum rem qui possimus quo officia distinctio beatae optio nihil soluta deleniti dignissimos ipsam veniam molestias numquam perferendis?

Rerum cumque ipsum vel aliquid possimus voluptatem et! Similique corporis a impedit debitis molestias voluptas alias nisi consectetur ipsam architecto omnis ad blanditiis cum aliquid doloremque itaque ratione. Magnam dicta.

Eum cupiditate officiis harum pariatur eveniet veniam unde quidem corporis quam consectetur. Labore veniam autem harum ducimus consequatur cupiditate mollitia officiis iste. Ratione amet dignissimos molestiae odio tempora corporis nam!

Culpa porro animi rem quibusdam dolorum nesciunt itaque blanditiis facere quisquam quae. Illum rem qui possimus quo officia distinctio beatae optio nihil soluta deleniti dignissimos ipsam veniam molestias numquam perferendis?

程式碼很簡單,一共九行,接下來大概解釋一下裡面的幾個東西。
第3行開始

$(window).scroll(function(){
  //code...
});

這裡面用到的就是 detect scroll event 的 jQuery 函式 .scroll()
jQuery 官網裡有更多的說明,在此就不多贅述。要注意到的是如何偵測 scroll 結束的時間點。

因為 javascript 原生並沒有偵測捲動結束的方法, 而且 scroll event 其實是連續觸發的,意謂你在 .scroll() 裡如果去算它執行次數的話, 在你滑動一次的期間,你會發現它可能就被觸發了四到五次。
而這解法是曾經在 stackoverflow.com 看過的,概念很簡單,透過 setTimeout and clearTimeout 的函式,就可以簡單做到偵測 scroll and stopped 的捕捉。

第1行定義了一個 scrollCheckTimer → 用來補捉 scroll 後的 callback func
第2行定義了一個變數 scrollDelay: 250 (毫秒)
第4行在scroll event 開始的同時 clearTimeout, 然後才開始 handle scrolling
第6~8行就是我們要的 scrolling stopped callback,它其實是一個手動定義的延時 function, 而 250ms~300ms delay 是經測試過較佳的延遲時間(捲動時間)

有注意到嗎?剛提到scroll event是連續執行的,而一開始的 clearTimeout 的執行就是為了那些不到 250ms scrolling 不要去 trigger stopped callback, 因為我還沒捲完嘛, 只有當某次 scroll後經過了 250ms 以後才去處理 :D

如果你手指得動夠快,連續向下捲動10次,每次都不超過250ms的話,那麼你最後只會得到一個 scrolling stopped 的結果,這也是 SINGLE PAGE DESIGN PROJECT 裡常會用到的,通常搭配 CSS Animation/transition,指定捲動一下後做一些頁面元素的跑動或像 Apple Mac Pro Page 這種更進階的用 scroll 來操控 video 的播放等等……

補充

雖然在討論網頁 scroll 時通常會是指 window 這個物件在 scroll, 因此範例 code 裡也是寫 $(window).scroll(),但其實它也可以綁定在其他 block(如DIV) $('#divId').scroll() 上的,像上方的範例,是去 detect 某個 div 的 scroll 而非 window 了

相簿設定
標籤設定
相簿狀態