关于HTML元素高度属性+滚动到底部实现的笔记

clientHeight

元素像素的可视高度，包含元素的高度+内边距，不包含水平滚动条，边框和外边距

 

offsetHeight

元素像素的可视高度，包含元素的垂直内边距和边框，水平滚动条的高度，且是一个整数

 

scrollHeight

元素的总高度，包括溢出的不可见内容

 

scrollTop

当前元素的可视顶部距离顶部的距离

 

浏览器窗口滚动到底部的JavaScript监听实现列子：

window.onscroll = function (event) {
  let element = document.documentElement;
  console.log(element.scrollTop + element.clientHeight, element.scrollHeight);
  //向上取整
  if (Math.ceil(element.scrollTop + element.clientHeight) >= element.scrollHeight) {
    console.log("已到达底部");
  }
};

 

元素滚动到底部的JavaScript监听实现列子：

let container = document.createElement("div"); //创建一个元素容器
container.style.height = "200px";
container.style.overflow = "scroll";

container.onscroll = function (event) {
  let element = event.target;
  //向上取整
  if (Math.ceil(element.scrollTop + element.clientHeight) >= element.scrollHeight) {
    console.log("已到达底部");
  }
};
document.body.appendChild(container);//把滚动容器元素放置到body里面