监听滚动条
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>scroll系列</title> <style type="text/css"> *{ padding: 0; margin: 0; } body{ width: 2000px; height: 2000px; } </style> </head> <body> <div id="box1" style=" 100%; height: 200px; background-color: seagreen";></div> <div id="box2" style=" 100%; height: 200px; background-color: salmon";></div> <div id="box3" style=" 100%; height: 200px; background-color: seashell";></div> <div id="box4" style=" 100%; height: 200px; background-color: skyblue";></div> <div id="scroll" style=" 200px;height: 200px;overflow: auto"> <p>scroll系列监听浏览器滚动事件</p> <p>scroll系列监听浏览器滚动事件</p> <p>scroll系列监听浏览器滚动事件</p> <p>scroll系列监听浏览器滚动事件</p> <p>scroll系列监听浏览器滚动事件</p> <p>scroll系列监听浏览器滚动事件</p> <p>scroll系列监听浏览器滚动事件</p> <p>scroll系列监听浏览器滚动事件</p> <p>scroll系列监听浏览器滚动事件</p> </div> </body> <script type="text/javascript"> window.onload=function () { //实时监听滚动事件 window.onscroll=function () { console.log(document.documentElement.scrollTop);//上下滚动的值 console.log(document.documentElement.scrollLeft);//左右滚动的值 }; //监听div滚动事件 var scroll=document.getElementById("scroll"); scroll.onscroll=function (ev) { scroll.scrollTop;//对象上下滚动距离 scroll.scrollLeft;//对象左右滚动距离 scroll.scrollWidth;//对象盒子宽度，包含padding值,不包含边框 scroll.scrollHeight;//对象盒子高度，包含padding值,不包含边框 } } </script> </html>