<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滚动条距离底部的距离</title> </head> <body> <div class="box"> <div style="height:10000px;"></div> </div> <script> window.addEventListener(‘scroll‘,function(){ console.log(document.documentElement.scrollTop);//代表目前滚动条和最上方的距离多长 console.log(document.documentElement.scrollHeight);//代表整个滚动条多长 console.log(document.documentElement.clientHeight); console.log(document.documentElement.scrollHeight-document.documentElement.scrollTop-document.documentElement.clientHeight); }) </script> </body> </html>