<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style> html, body { height: 100%; width: 100%; background-color: aliceblue; } </style> <script> //来自于MDN //Element.scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。 //Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。 // 如果元素滚动到底，下面等式返回true，没有则返回false. // element.scrollHeight - element.scrollTop === element.clientHeight // 当容器不滚动但有溢出的子容器时，这些检查可以确定容器能否滚动： // window.getComputedStyle(element).overflowY === 'visible' window.getComputedStyle(element).overflowY !== 'hidden' //文档高度 function getDocumentTop() { let bodyScrollTop = document.body ? document.body.scrollTop : 0; let documentScrollTop = document.documentElement ? document.documentElement.scrollTop : 0; return (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; } //可视窗口高度 function getWindowHeight() { let windowHeight = 0; if (document.compatMode == "CSS1Compat") { windowHeight = document.documentElement.clientHeight; } else { windowHeight = document.body.clientHeight; } return windowHeight; } //滚动条滚动高度 function getScrollHeight() { let bodyScrollHeight = document.body ? document.body.scrollHeight : 0; let documentScrollHeight = document.documentElement ? document.documentElement.scrollHeight : 0; return (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight; } window.onscroll = function () { //监听事件内容 if (getScrollHeight() == getWindowHeight() + getDocumentTop()) { document.body.style.height = getScrollHeight() + 10 + 'px' //当滚动条到底时,这里是触发内容 //异步请求数据,局部刷新dom } } </script> </body> </html>