White Bunny's Notes
滾來滾去的 Wheel vs Scroll event

滾來滾去的 Wheel vs Scroll event

White Bunny's photo
White Bunny
·

1 min read

昨天處理一個需求是：「網頁的畫面往上滑時要隱藏頂端選單，往下滑時再顯示選單」

聽起來好像只要偵測滾動方向是吧？好的好的！

於是天真的小白選擇了 wheel 來實作，沒想到這就是錯誤的開始：

  $(window).on('wheel', function(event){
      if(event.originalEvent.deltaY < 0){
        // up       
      } else {
        // down    
      }
    }
  });

這麼一來只要判斷 deltaY 是否為正值，就能知道滾動的方向是向上(負)還是向下(正)了， 是不是很簡單呢？

巴特，代誌不是小白所想的辣麼簡單⋯⋯

wheel 事件在手機上面毫無反應啊啊啊啊啊～～～（廢話）

小白眉頭一皺心想：滑鼠的 wheel 是不是手機的 touch 呀？！ 前後實驗了 touchmove, touchend, touchstart 等，結果都不是原來要的效果。

於是把問題整理到 codepen 貼到萬能的兔兔教後，果然召喚到一隻好心的奶捲兔幫忙解答～原來！！！

手機滑動監聽要使用 scroll event 啊！

而且 scroll event 不論是桌機或是手機都可以用（大心）超方便的鴨～

來看看奶捲兔的 code ：

var lastScrollTop = 0;
 $(document).scroll(function(){
    var st = window.pageYOffset || document.documentElement.scrollTop; 
     if (st > lastScrollTop){
        // down
     } else {
        // up
     }
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
});
  1. 先設定一個變數 lastScrollTop 用來記錄上次滾動的數值
  2. st 為本次滾動的數值
  3. 對 lastScrollTop 和 st 做比較，如果 st 數值比上次滾動的數值大，即是往下(down)，反之就是往上(up)。
  4. 更新 lastScrollTop 的值，如果 st 是負的則設為 0

就這麼簡單同時完成桌機跟手機的滾動方向偵測，真開心～ 感謝奶捲兔～

後記：

  • 後來看了 MDN 的說明，才知道用 wheel 來推斷文件滾動方向的作法是錯誤的，詳細請看 MDN wheel event 喔
  • 參考 MDN scroll event
  • 奶捲兔補充：單純的顯示切換可以用 .toggle() 就好
JavaScript