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

imccl 發布于2019-08-19 18:20 / 3054人閱讀

摘要：判斷頁面滾動方向是一個常見的需求，下面展示一個使用原生方式判斷頁面滾動方向的解決方式。

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

html

  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-direction

GPU云服務器云服務器頁面滾動方向原生js滾輪滾動原生js實現 ajax原生js實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79469.html

用 ES6 寫全屏滾動插件

摘要：這篇文章將介紹如何使用原生主要使用語法實現全屏滾動插件，兼容手機觸屏，觸摸板優化，支持自定義頁面動畫，壓縮后文件只有。這篇文章將介紹如何使用原生 JS （主要使用 ES6 語法）實現全屏滾動插件，兼容 IE 10+、手機觸屏，Mac 觸摸板優化，支持自定義頁面動畫，壓縮后 gzip 文件只有 2.15KB。完整源碼在這 pure-full-page，點這查看 demo。 1）前面的話...

liuchengxu 2019-08-26 11:52 評論0 收藏0
jquery插件Nicescroll 3(非常類似IOS原生的滾動條) （轉）

摘要：使用了很多的滾動條插件，如這次說說，支持水平滾動條，支持文本區和文檔頁面滾動條。，兼容所有的桌面瀏覽器。，兼容移動設備黑莓手機和芒果。，兼容所有觸摸設備平板電腦窗口接口。，簡單的安裝和激活不破壞代碼。使用了很多的滾動條插件，如Iscroll,swiper,這次說說Nicescroll 1，支持水平滾動條! 2，支持div,IFrames,文本區和文檔頁面滾動條。 3，兼容所有的桌面...

B0B0 2019-08-21 10:54 評論0 收藏0
如何判斷元素是否在可視區域ViewPort

摘要：在這里一次性做個總結，以用來判斷元素是否在可視區域以及用原生簡單實現懶加載。被隱藏在內容區域左側的像素數。比如上篇文章文字跑馬燈項目中的使用戳此跳轉小結只讀屬性，不包括滾動條。個性簽名: 生如夏花，逝如冬雪；人生如此，何悔何怨。前言: 經常需要計算元素的大小或者所在頁面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop這幾個關鍵字的出...

jayzou 2019-08-23 13:43 評論0 收藏0
如何判斷元素是否在可視區域ViewPort

摘要：在這里一次性做個總結，以用來判斷元素是否在可視區域以及用原生簡單實現懶加載。被隱藏在內容區域左側的像素數。比如上篇文章文字跑馬燈項目中的使用戳此跳轉小結只讀屬性，不包括滾動條。個性簽名: 生如夏花，逝如冬雪；人生如此，何悔何怨。前言: 經常需要計算元素的大小或者所在頁面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop這幾個關鍵字的出...

xiguadada 2019-08-02 12:06 評論0 收藏0
如何判斷元素是否在可視區域ViewPort

摘要：在這里一次性做個總結，以用來判斷元素是否在可視區域以及用原生簡單實現懶加載。被隱藏在內容區域左側的像素數。比如上篇文章文字跑馬燈項目中的使用戳此跳轉小結只讀屬性，不包括滾動條。個性簽名: 生如夏花，逝如冬雪；人生如此，何悔何怨。前言: 經常需要計算元素的大小或者所在頁面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop這幾個關鍵字的出...

zhigoo 2019-08-29 17:24 評論0 收藏0