滚动事件

<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 滚动事件 </title>

    <!--  滚动事件：onscroll： 在滚动时触发; -->

    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #f00;
            overflow: auto;
        }

        img {
            vertical-align: top;
        }
    </style>

</head>

<body>

    <div class="box">
        <img src="../images/01.jpg" alt="">
    </div>

    <script>
        // 添加滚动事件
        document.querySelector('.box').onscroll = function () {
            // 将滚动值打印在控制台;
            console.log(this.scrollLeft, this.scrollTop);
        }
    </script>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容