获取当前滚动高度
也就是页面顶部超出视口的高度。
function getScrollTop() {
return document.body.scrollTop || document.documentElement.scrollTop;
}
document.documentElement
获取到的是html标签。IE支持,chrome目前也支持。 document.body
获取到的是body标签。chrome/ff支持。
页面滚动的总高度
function getScrollHeight() {
return document.body.scrollHeight || document.documentElement.scrollHeight;
}
视口高度
function getClientHeight() {
return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
}
window.innerHeight
在IE8-不支持。并且会受到initial-scale
缩放的影响。因此需要取一个max值。
如何判断滚动到了顶部
当scrollTop
的值为0时,则滚动到了顶部。
if (getScrollTop() === 0) {
// 滚动到了顶部
}
如何判断滚动到了最低部
当滚动高度scrollTop
与视口高度clientHeight
之和,大于等于总高度scrollHeight
时,则表示滚动到了底部。
var curHeight = getScrollTop() + getClientHeight();
if (curHeight >= getScrollHeight()) {
// 滚动到了底部
}
如何判断滚动方向
var preTop = 0;
var curTop = 0;
var timer = null;
document.addEventListener('scroll', () => {
clearTimeout(timer);
curTop = getScrollTop();
if (curTop > preTop) {
console.log('向下滚动');
}
if (curTop < preTop) {
console.log('向上滚动');
}
timer = setTimeout(() => {
preTop = curTop;
}, 10);
}, !1);
函数节流
降低函数的触发频率。
原理是通过闭包与setTimeout,缓存一个timer值。 当timer值不为null时,阻止操作重复执行。每一次操作执行完毕,将timer设置为null。这样下一次操作将不会受到阻止。如果我们需要调节执行频率,只需要改变setTimeout的延迟时间即可。
const throttle = (fn, delay) => {
let timer = null;
let isFrist = true; // 第一次直接执行
return function() {
const args = [].slice.call(arguments);
const self = this;
if (timer) {
return false;
}
if (isFrist) {
fn.apply(self, args);
isFrist = false;
}
timer = setTimeout(() => {
clearTimeout(timer);
timer = null;
fn.apply(self, args);
}, delay || 500)
}
}
demo代码
var preTop = 0;
var curTop = 0;
var timer = null;
document.addEventListener('scroll', throttle(() => {
clearTimeout(timer);
curTop = getScrollTop();
console.log(document.documentElement.scrollTop, document.documentElement.scrollHeight);
if (getScrollTop() + getClientHeight() >= getScrollHeight()) {
console.log('到底了兄弟.');
}
if (curTop > preTop) {
console.log('向下滚动');
}
if (curTop < preTop) {
console.log('向上滚动');
}
timer = setTimeout(() => {
preTop = curTop;
}, 10);
}, 300), !1);
console.log('视口高度: ', window.innerHeight, document.documentElement.clientHeight);
function getScrollTop() {
return document.body.scrollTop || document.documentElement.scrollTop;
}
function getScrollHeight() {
return document.body.scrollHeight || document.documentElement.scrollHeight;
}
function getClientHeight() {
return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
}
function log() {
console.log('xxx');
}
function throttle(fn, delay) {
let timer = null;
let isFrist = true; // 第一次直接执行
return function() {
const args = [].slice.call(arguments);
const self = this;
if (timer) {
return false;
}
if (isFrist) {
fn.apply(self, args);
isFrist = false;
}
timer = setTimeout(() => {
clearTimeout(timer);
timer = null;
fn.apply(self, args);
}, delay || 500)
}
}
应用场景
滚动加载更多 | 滚动判断某些元素的显示与隐藏 | 视差滚动特效 等。
一次需求中需要用到这些知识点,做了一个小小的总结以便记忆查询,欢迎大家补充,多多交流,一起进步。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。