原生JS實(shí)現(xiàn)頁面滾動(dòng)方向檢測

imccl 發(fā)布于2019-08-19 18:20 / 3057人閱讀

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

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

html

  var $nav = $(".nav");
  var $result = $(".result");
  
  //頁面滾動(dòng)監(jiān)聽事件
  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;
  
  //判斷頁面滾動(dòng)方向
  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

云服務(wù)器 GPU云服務(wù)器頁面滾動(dòng)方向原生js滾輪滾動(dòng) 原生js實(shí)現(xiàn) ajax原生js實(shí)現(xiàn)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79469.html

相關(guān)文章

用 ES6 寫全屏滾動(dòng)插件

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

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

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

B0B0 2019-08-21 10:54 評(píng)論0 收藏0
如何判斷元素是否在可視區(qū)域ViewPort

摘要：在這里一次性做個(gè)總結(jié)，以用來判斷元素是否在可視區(qū)域以及用原生簡單實(shí)現(xiàn)懶加載。被隱藏在內(nèi)容區(qū)域左側(cè)的像素?cái)?shù)。比如上篇文章文字跑馬燈項(xiàng)目中的使用戳此跳轉(zhuǎn)小結(jié)只讀屬性，不包括滾動(dòng)條。個(gè)性簽名: 生如夏花，逝如冬雪；人生如此，何悔何怨。前言: 經(jīng)常需要計(jì)算元素的大小或者所在頁面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop這幾個(gè)關(guān)鍵字的出...

jayzou 2019-08-23 13:43 評(píng)論0 收藏0
如何判斷元素是否在可視區(qū)域ViewPort

摘要：在這里一次性做個(gè)總結(jié)，以用來判斷元素是否在可視區(qū)域以及用原生簡單實(shí)現(xiàn)懶加載。被隱藏在內(nèi)容區(qū)域左側(cè)的像素?cái)?shù)。比如上篇文章文字跑馬燈項(xiàng)目中的使用戳此跳轉(zhuǎn)小結(jié)只讀屬性，不包括滾動(dòng)條。個(gè)性簽名: 生如夏花，逝如冬雪；人生如此，何悔何怨。前言: 經(jīng)常需要計(jì)算元素的大小或者所在頁面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop這幾個(gè)關(guān)鍵字的出...

xiguadada 2019-08-02 12:06 評(píng)論0 收藏0
如何判斷元素是否在可視區(qū)域ViewPort

摘要：在這里一次性做個(gè)總結(jié)，以用來判斷元素是否在可視區(qū)域以及用原生簡單實(shí)現(xiàn)懶加載。被隱藏在內(nèi)容區(qū)域左側(cè)的像素?cái)?shù)。比如上篇文章文字跑馬燈項(xiàng)目中的使用戳此跳轉(zhuǎn)小結(jié)只讀屬性，不包括滾動(dòng)條。個(gè)性簽名: 生如夏花，逝如冬雪；人生如此，何悔何怨。前言: 經(jīng)常需要計(jì)算元素的大小或者所在頁面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop這幾個(gè)關(guān)鍵字的出...

zhigoo 2019-08-29 17:24 評(píng)論0 收藏0