摘要:判断页面滚动方向是一个常见的需求,下面展示一个使用原生方式判断页面滚动方向的解决方式。
判断页面滚动方向是一个常见的需求,下面展示一个使用原生JS方式判断页面滚动方向的解决方式。
htmljs
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
摘要:这篇文章将介绍如何使用原生主要使用语法实现全屏滚动插件,兼容手机触屏,触摸板优化,支持自定义页面动画,压缩后文件只有。 这篇文章将介绍如何使用原生 JS (主要使用 ES6 语法)实现全屏滚动插件,兼容 IE 10+、手机触屏,Mac 触摸板优化,支持自定义页面动画,压缩后 gzip 文件只有 2.15KB。完整源码在这 pure-full-page,点这查看 demo。 1)前面的话...
摘要:使用了很多的滚动条插件,如这次说说,支持水平滚动条,支持文本区和文档页面滚动条。,兼容所有的桌面浏览器。,兼容移动设备黑莓手机和芒果。,兼容所有触摸设备平板电脑窗口接口。,简单的安装和激活不破坏代码。 使用了很多的滚动条插件,如Iscroll,swiper,这次说说Nicescroll 1,支持水平滚动条! 2,支持div,IFrames,文本区和文档页面滚动条。 3,兼容所有的桌面...
摘要:在这里一次性做个总结,以用来判断元素是否在可视区域以及用原生简单实现懒加载。被隐藏在内容区域左侧的像素数。比如上篇文章文字跑马灯项目中的使用戳此跳转小结只读属性,不包括滚动条。 个性签名: 生如夏花,逝如冬雪;人生如此,何悔何怨。 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth,clientWidth,scrollWidth,scrollTop这几个关键字的出...
摘要:在这里一次性做个总结,以用来判断元素是否在可视区域以及用原生简单实现懒加载。被隐藏在内容区域左侧的像素数。比如上篇文章文字跑马灯项目中的使用戳此跳转小结只读属性,不包括滚动条。 个性签名: 生如夏花,逝如冬雪;人生如此,何悔何怨。 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth,clientWidth,scrollWidth,scrollTop这几个关键字的出...
摘要:在这里一次性做个总结,以用来判断元素是否在可视区域以及用原生简单实现懒加载。被隐藏在内容区域左侧的像素数。比如上篇文章文字跑马灯项目中的使用戳此跳转小结只读属性,不包括滚动条。 个性签名: 生如夏花,逝如冬雪;人生如此,何悔何怨。 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth,clientWidth,scrollWidth,scrollTop这几个关键字的出...
阅读 3241·2021-09-08 09:45
阅读 1222·2019-08-30 15:53
阅读 1482·2019-08-30 14:12
阅读 907·2019-08-29 17:01
阅读 2542·2019-08-29 15:35
阅读 372·2019-08-29 13:09
阅读 1915·2019-08-29 12:32
阅读 3070·2019-08-26 18:37