原生JS實現頁面滾動方向檢測

時間 2019-12-04

原文原文鏈接

判斷頁面滾動方向是一個常見的需求，下面展現一個使用原生JS方式判斷頁面滾動方向的解決方式。css

html

<script src="http://g.tbcdn.cn/tb/kimi/0.0.233/kimi.js"></script>

<body style="height: 6000px;">
    <div class="nav" style="position:fixed; top:0;left:0;width: 100%;height: 60px;background-color: pink;"></div>
    
</body>

js

var $nav = $('.nav');
  var $result = $('.result');
  
  //頁面滾動監聽事件
  window.onscroll = function(e){
    $result.html('swipeDown');
    scrollFunc();
    if(scrollDirection == 'down'){
      $nav.css({
        position: 'absolute'
      });
    }
    else if(scrollDirection == 'up'){
      $nav.css({
        position: 'fixed'
      });
    }
  }
  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;
  }

github地址

https://github.com/korbinzhao/exercise/blob/master/js-scroll-direction.html

博客地址：http://joebon.cc/js-scroll-directionhtml

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。