获取当前滚动高度

也就是页面顶部超出视口的高度。

function getScrollTop() {  return document.body.scrollTop || document.documentElement.scrollTop;}

document.documentElement获取到的是html标签。IE支持，chrome目前也支持。

页面滚动的总高度

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)  }}

应用场景

滚动加载更多 | 滚动判断某些元素的显示与隐藏 | 视差滚动特效 等。

一次需求中需要用到这些知识点，做了一个小小的总结以便记忆查询，欢迎大家补充，多多交流，一起进步。