js 滚动条到底部自动加载数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>test</title> </head> <body> <div id="box"></div> <script type="text/javascript"> function addData() { let box = document.getElementById('box'); for (let i = 0; i < 50; i++) { let span = document.createElement('span'); span.innerHTML = 'test' + i + '<br>'; box.appendChild(span); } } addData(); window.onscroll = function () { //scrollTop就是触发滚轮事件时滚轮的高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; console.log("滚动距离" + scrollTop); //变量windowHeight是可视区的高度 var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; console.log("可视高度" + windowHeight); //变量scrollHeight是滚动条的总高度 var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; console.log("总高度" + scrollHeight); //判断滚动条是否到底部 if (scrollTop + windowHeight == scrollHeight) { //加载数据 console.log("距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight); addData(); } } </script> </body> </html>