滚动相关知识点总结

qieangel2013 发布于2019-08-22 11:19 / 2310人阅读

摘要：页面滚动的总高度视口高度在不支持。滚动到了顶部如何判断滚动到了最低部当滚动高度与视口高度之和，大于等于总高度时，则表示滚动到了底部。一次需求中需要用到这些知识点，做了一个小小的总结以便记忆查询，欢迎大家补充，多多交流，一起进步。

获取当前滚动高度

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

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

应用场景

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

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

GPU云服务器云服务器 linux数据结构知识点总结位段知识总结相关知识 cdn相关知识

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

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

JavaScript-Dom相关知识点

摘要：并提供相对于它左上角的坐标。属性还包括滚出隐藏部分，例如没有水平滚动，等于大多数几何属性是只读的，但可以更改，浏览器将滚动元素。元素的滚动部分的宽度高度注意点如果一个元素不能被滚动例如，它没有溢出，或者这个元素有一个属性，将被设置为。主旨用来记录和总结学的知识点，以便温故知新说明这么写方便自己记忆记忆点节点相关 Dom节点获取 getElement (Id,Class...

XiNGRZ 2019-08-23 12:34 评论0 收藏0
垂直居中相关知识总结

摘要：垂直居中相关知识总结前言工作中用到了很多关于垂直居中相关的知识之前，在上提问了个问题关于垂直居中，大家有没有什么比较好的建议。垂直居中相关知识总结前言工作中用到了很多关于垂直居中相关的知识之前，在SF上提问了个问题CSS关于垂直居中，大家有没有什么比较好的建议。非常感谢各位前辈对我的帮助，前辈们给的答案都非常多也各式各样，我觉得有必要把大家的回答总结一下。方法总结一、绝对定...

Labradors 2019-08-19 17:31 评论0 收藏0
垂直居中相关知识总结

摘要：垂直居中相关知识总结前言工作中用到了很多关于垂直居中相关的知识之前，在上提问了个问题关于垂直居中，大家有没有什么比较好的建议。垂直居中相关知识总结前言工作中用到了很多关于垂直居中相关的知识之前，在SF上提问了个问题CSS关于垂直居中，大家有没有什么比较好的建议。非常感谢各位前辈对我的帮助，前辈们给的答案都非常多也各式各样，我觉得有必要把大家的回答总结一下。方法总结一、绝对定...

GeekGhc 2019-08-01 15:02 评论0 收藏0
移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。移动端页面适配—...

Clect 2019-08-29 14:08 评论0 收藏0