scroll系列

编辑本博客

监听滚动条

<!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="width: 100%; height: 200px; background-color: seagreen";></div>
    <div id="box2" style="width: 100%; height: 200px; background-color: salmon";></div>
    <div id="box3" style="width: 100%; height: 200px; background-color: seashell";></div>
    <div id="box4" style="width: 100%; height: 200px; background-color: skyblue";></div>
    <div id="scroll" style="width: 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>
View Code

 

posted @ 2018-06-17 10:38  丫丫625202  阅读(145)  评论(0)  编辑  收藏  举报