監聽頁面向上向下滾動事件


需求

希望在頁面向下滾動時則隱藏"返回頂部"按鈕,否則顯示。
以下將滾動代碼整理出來scrollEvent()方法
(適用於滾輪滾動、鍵盤上下滾動、滾動條滾動)

代碼

/* 監聽頁面向上向下滾動事件 */
function scrollEvent() {
  window.onscroll = function (e) {
    scrollFunc();
    if (scrollDirection == 'down') {
      //頁面向下滾動要做的事情
    } else if (scrollDirection == 'up') {
      //頁面向上滾動要做的事情
    }
  }
}

var scrollAction = {
    x: 'undefined',
    y: 'undefined'
  },
  scrollDirection;

function scrollFunc() {
  if (typeof scrollAction.x == 'undefined') {
    scrollAction.x = window.pageXOffset;
    scrollAction.y = window.pageYOffset;
  }
  var diffX = scrollAction.x - window.pageXOffset;
  var diffY = scrollAction.y - window.pageYOffset;
  if (diffX < 0) {
    // Scroll right
    scrollDirection = 'right';
  } else if (diffX > 0) {
    // Scroll left
    scrollDirection = 'left';
  } else if (diffY < 0) {
    // Scroll down
    scrollDirection = 'down';
  } else if (diffY > 0) {
    // Scroll up
    scrollDirection = 'up';
  } else {
    // First scroll event
  }
  scrollAction.x = window.pageXOffset;
  scrollAction.y = window.pageYOffset;
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM