原生JS实现页面滚动方向检测

imccl 发布于2019-08-19 18:20 / 2978人阅读

摘要：判断页面滚动方向是一个常见的需求，下面展示一个使用原生方式判断页面滚动方向的解决方式。

判断页面滚动方向是一个常见的需求，下面展示一个使用原生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实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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