关于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里面