监听鼠标滚动事件，当滚动条滚动到某些距离时显示DIV

最新推荐文章于 2024-08-09 02:17:55 发布

华洛

最新推荐文章于 2024-08-09 02:17:55 发布

阅读量7.1k

点赞数 4

分类专栏： HTML javascript 文章标签：懒加载滚动监听滚动事件 scroll

本文链接：https://blog.csdn.net/sdta25196/article/details/77980013

版权

javascript 同时被 2 个专栏收录

95 篇文章 2 订阅

订阅专栏

HTML

49 篇文章 1 订阅

订阅专栏

// 这个是JQ的, 下面那个是原生JS的, 看使用场景去选
  $(function(){
        $(window).scroll(function() {
            var s = $(window).scrollTop();
            if(s>300){
                $("#hiden").show();
            }else{
                $("#hiden").hide();
            }
        });
    })

<!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>Document</title>
    <style>
        div{
            width: 100px;
            height: 300px;
            background:#555;
            margin-bottom: 10px;
            margin-left: 40%;
        }
        #a{
            background: red;
        }
    </style>
    <script>
        //JS实现懒加载原理,监听滚动时间,当滚动条位置减去屏幕高度大于div所在的offsetTop的时候 这个div样式改变;
        //换成img元素,将真实的src写到自定义data-src属性中,滚动到位置的时候用data-src代替现在的src即可
        window.onscroll = _=>{
            console.log(document.documentElement.scrollTop)
            let oA = document.querySelector("#a");
            console.log(oA.offsetTop)
            if((document.documentElement.scrollTop+ document.documentElement.clientHeight) >= oA.offsetTop){
                console.log('true')
                oA.style.width='500px';
            }
        }
    </script>
</head>
<body>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div id='a'></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
</body>
</html>