滚动条事件实现

最新推荐文章于 2024-04-12 14:03:40 发布

AN偏偏爱上

最新推荐文章于 2024-04-12 14:03:40 发布

阅读量396

点赞数

分类专栏：前端文章标签： javascript 滚动条

本文链接：https://blog.csdn.net/AN_pianpian/article/details/78095302

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

滚动条事件事件实现方式，简单易懂！！！！粘贴使用！！！
这里写图片描述

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .cont{
            height: 5000px;
        }
        #top{
            position: fixed;
            width: 100%;
            height: 50px;
            top: 0px;
            left: 0px;
            background-color: pink;
            display: none;
        }
        #left{
            position: fixed;
            top: 150px;
            left: 20px;
            height: 500px;
            width: 50px;
            background-color: green;
            display: none;
        }
    </style>

    <script>



        //滚动事件
        function myScroll(){

            var i = document.body.scrollTop;
            var top = document.getElementById("top");
            var left = document.getElementById("left");

            //控制顶部
            if(i >= 1000){
                top.style.display = "block";
                top.innerHTML = i;
            }else{
                top.style.display = "none";
            }

            //控制左侧
            if(i >= 2000){
                left.style.display = "block";
            }else{
                left.style.display = "none";
            }

        }

    </script>

</head>
<body onscroll="myScroll()">

    <div id="left"></div>

    <div id="top"></div>
    <div class="cont"></div>

</body>