js两种滚动事件写法

方式一：可判断滚动条滚动方向。

$(window).scroll(() => {// 滚动条距文档顶部的距离, || 是做兼容处理的let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop// 滚动条滚动的距离let scrollStep = scrollTop - this.oldScrollTop            // 更新-滚动前,滚动条到文档顶部的距离this.oldScrollTop = scrollTopif (scrollStep > 0) {// console.log('滚动条向下滚动')}else {// console.log('滚动条向上滚动')}
})

根据滚动条滚动的距离是否大于 0 来判断向上还是向下滚动。不太适合用于下滚无限加载，因为加载需要有固定的底部距离，此写法不太好确定，效果一般。

方式二：只判断滚动条底部到可视区底部的距离，即可视区底部到页面底部的距离，因此方向是只向下的。

$(window).scroll(() => {let scrollH = document.body.scrollHeightlet scrollT = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollToplet clientH = document.documentElement.clientHeightlet instance = scrollH - scrollT - clientHif (instance < 50) {// console.log('滚动条向下滚动')}
})

两种方式对于向下滚动没有大的区别，第二种方向是专门针对向下滚动的，用于下滚无限加载很简单实用。

js两种滚动事件写法相关推荐

小程序如何做成html的滚动字幕,小程序两种滚动公告栏的实现方法
先上效果图: 横向滚动栏实现: 网上的几种方案或多或少都有一些问题: 1.setData定时器更新text view的margin-left方法,由于setData的毫秒延时,动画播放起来一卡一卡: ...
函数指针--Nginx和Redis中两种回调函数写法
1.Nginx和Redis中两种回调函数写法 #include <stdio.h>//仿Nginx风格 //结构外声明函数指针类型 typedef void (*ngx_connectio ...
iOS开发笔记－两种单例模式的写法
iOS开发笔记-两种单例模式的写法单例模式是开发中最常用的写法之一,iOS的单例模式有两种官方写法,如下: 不使用GCD #import "ServiceManager.h"st ...
java ： enum、创建文件和文件夹、删除文件和文件夹、获得项目绝对路径、写入数据到excel中、java代码中两种路径符号写法、读取、写入text文件...
java : enum http://www.cnblogs.com/hyl8218/p/5088287.html 创建文件和文件夹.删除文件和文件夹 http://www.cnblogs.com/m ...
js两种拼接字符串方法
js两种拼接字符串方法 function(msgArr) {//参数为一个数组,每一个对象为图片id和图片地址var len = msgArr.length;//第一种拼接方式,直接用"+& ...
JS网页滚动条滚动事件实例分析
js网页滚动条滚动事件的用法,在javascript中window.onscroll监控滚动条滚动事件的相关技巧本文实例讲述了js网页滚动条滚动事件用法,具体分析如下: 在做js返回顶部的效果时,要 ...
js两种方法删除对象属性
js 两种方法删除对象属性 delete 语法 delete 对象.属性名示例 delete.obj.property1 不过据说很慢,不如下面的方法. Reflect.deleteProperty ...
js两种移除事件的方法
在js的学习中,为元素添加事件是非常常见的那么,下面我带大家了解一下js中移除事件的两种方法 <!DOCTYPE html> <html><head><me ...
js获取日期选择器值html,利用Query+bootstrap和js两种方式实现日期选择器
前言所谓日期选择是在下拉列表中选择年.月.日,年显示前后的五年,12个月,日就是有30.31.29.28天的区别,随着月份的变而变,本文介绍了利用Query+bootstrap和js实现日期选择器的 ...

js两种滚动事件写法

js两种滚动事件写法相关推荐

最新文章

热门文章