web-滚动条事件，明确来说就是一些网站上的滚动条滚动到某一个位置才会出现你想看到的东西

最新推荐文章于 2024-04-21 09:10:41 发布

h_Snow_1

最新推荐文章于 2024-04-21 09:10:41 发布

阅读量614

点赞数 1

分类专栏：前端H5 文章标签：界面淘宝网京东

本文链接：https://blog.csdn.net/h_Snow_1/article/details/78119273

版权

前端H5 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

这个滚动事件，就好像是淘宝，京东上的一样，它们左边的区块会有某些产品的介绍，所以这时就需要滚动条事件，就是为了用户的便利而设置的该在这个界面的那个地方显示对产品的介绍，不懂的可以看下图
这个就是滚动条示意图，你可以看到上面的数字，每一个都不相同，你可以看到数字的变化


<!DOCTYPE html>
<html>
    <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>

//          var a = 0;

            //滚动事件
            function myScroll(){
//              a++;

                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>
</html>

h_Snow_1

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web-滚动条事件，明确来说就是一些网站上的滚动条滚动到某一个位置才会出现你想看到的东西

这个滚动事件，就好像是淘宝，京东上的一样，它们左边的区块会有某些产品的介绍，所以这时就需要滚动条事件，就是为了用户的便利而设置的该在这个界面的那个地方显示对产品的介绍，不懂的可以看下图 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style>
复制链接

扫一扫