js用scrlltop实现随滚动条滚动创建item【2021.11.20】

最新推荐文章于 2022-04-27 11:35:35 发布

轻盈的风

最新推荐文章于 2022-04-27 11:35:35 发布

阅读量125

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/masierty/article/details/121475790

版权

在说具体代码之前，我们需要简单了解一下HTML的头部的文档声明，就像是：

<!DOCTYPE html>

这是咋们最常用的文档声明，浏览器解析时使用标准模式还是怪异模式，与你网页中的文档声明直接相关，文档声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略文档声明,将使网页进入怪异模式（浏览器自己的方式解析执行代码）。

现在回到主题，如果我们没有进行任何文档声明，那么document.body.scrollTop获得正确的值，而document.documentElement.scrollTop的值为0，相反我们进行了文档声明的话就需要用document.documentElement.scrollTop来获取超出浏览器窗口上边界的的内容的高度了。

我们获取了滚动条动态的变化值后，只需给它一个判断，每次是5 的倍数时，就创建一个class Name名为item的div并加入contenter里面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .contenter{
             width: 80%;
             display: grid;
             grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
             grid-template-rows: repeat(16,300px);
             gap: 10px;
             justify-content: stretch;
             align-items: stretch;
        }
        .contenter div{
            background-color: rgb(173, 225, 241);
        }
    </style>
</head>
<body>
    <div class="contenter">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
<script>
    let contenter = document.getElementsByClassName("contenter")[0];
    let distance=0;
    window.onscroll=function(){
        distance = document.documentElement.scrollTop; 
        // console.log(distance);
        let idex=0;
        if(distance>=600 && distance<=2000){
            if((distance-600)%5==0){
                idex++;
                if(idex<180){
           let new_div = document.createElement('div');
           contenter.appendChild(new_div);
           new_div.className="item";
             }
           }
        }
    }
</script>
</html>

轻盈的风

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js用scrlltop实现随滚动条滚动创建item【2021.11.20】

在说具体代码之前，我们需要简单了解一下HTML的头部的文档声明，就像是：<!DOCTYPE html>这是咋们最常用的文档声明，浏览器解析时使用标准模式还是怪异模式，与你网页中的文档声明直接相关，文档声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略文档声明,将使网页进入怪异模式（浏览器自己的方式解析执行代码）。现在回到主题，如果我们没有进行任何文档声明，那么document.body.scrollTop获得正确的值，而document.
复制链接

扫一扫