资讯专栏INFORMATION COLUMN

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

imccl / 2989人阅读

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

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

html



    
    

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

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

转载请注明本文地址:https://www.ucloud.cn/yun/79469.html

相关文章

  • 用 ES6 写全屏滚动插件

    摘要:这篇文章将介绍如何使用原生主要使用语法实现全屏滚动插件,兼容手机触屏,触摸板优化,支持自定义页面动画,压缩后文件只有。 这篇文章将介绍如何使用原生 JS (主要使用 ES6 语法)实现全屏滚动插件,兼容 IE 10+、手机触屏,Mac 触摸板优化,支持自定义页面动画,压缩后 gzip 文件只有 2.15KB。完整源码在这 pure-full-page,点这查看 demo。 1)前面的话...

    liuchengxu 评论0 收藏0
  • jquery插件Nicescroll 3(非常类似IOS原生滚动条) (转)

    摘要:使用了很多的滚动条插件,如这次说说,支持水平滚动条,支持文本区和文档页面滚动条。,兼容所有的桌面浏览器。,兼容移动设备黑莓手机和芒果。,兼容所有触摸设备平板电脑窗口接口。,简单的安装和激活不破坏代码。 使用了很多的滚动条插件,如Iscroll,swiper,这次说说Nicescroll 1,支持水平滚动条! 2,支持div,IFrames,文本区和文档页面滚动条。 3,兼容所有的桌面...

    B0B0 评论0 收藏0
  • 如何判断元素是否在可视区域ViewPort

    摘要:在这里一次性做个总结,以用来判断元素是否在可视区域以及用原生简单实现懒加载。被隐藏在内容区域左侧的像素数。比如上篇文章文字跑马灯项目中的使用戳此跳转小结只读属性,不包括滚动条。 个性签名: 生如夏花,逝如冬雪;人生如此,何悔何怨。 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth,clientWidth,scrollWidth,scrollTop这几个关键字的出...

    jayzou 评论0 收藏0
  • 如何判断元素是否在可视区域ViewPort

    摘要:在这里一次性做个总结,以用来判断元素是否在可视区域以及用原生简单实现懒加载。被隐藏在内容区域左侧的像素数。比如上篇文章文字跑马灯项目中的使用戳此跳转小结只读属性,不包括滚动条。 个性签名: 生如夏花,逝如冬雪;人生如此,何悔何怨。 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth,clientWidth,scrollWidth,scrollTop这几个关键字的出...

    xiguadada 评论0 收藏0
  • 如何判断元素是否在可视区域ViewPort

    摘要:在这里一次性做个总结,以用来判断元素是否在可视区域以及用原生简单实现懒加载。被隐藏在内容区域左侧的像素数。比如上篇文章文字跑马灯项目中的使用戳此跳转小结只读属性,不包括滚动条。 个性签名: 生如夏花,逝如冬雪;人生如此,何悔何怨。 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth,clientWidth,scrollWidth,scrollTop这几个关键字的出...

    zhigoo 评论0 收藏0

发表评论

0条评论

imccl

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<