position定位之后的内容滚动到底部加载更多

最新推荐文章于 2024-05-09 15:18:08 发布

CN-cheng

最新推荐文章于 2024-05-09 15:18:08 发布

阅读量668

点赞数

分类专栏：小玩意小效果经验

本文链接：https://blog.csdn.net/github_37125043/article/details/80785667

版权

小玩意同时被 3 个专栏收录

14 篇文章 1 订阅

订阅专栏

小效果

14 篇文章 0 订阅

订阅专栏

经验

11 篇文章 0 订阅

订阅专栏

今天稍微清闲点，想起了前几天项目中遇到的问题，在页面position定位的内容里实现滚动加载更多，之前写了滚动加载更多是没有定位，通过window.onscroll()方法触发，现在的这个需求有些不一样，这里记录一下方便以后参考，下面直接放上代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
    <title>绝对定位内容上拉到底部加载更多</title>
</head>
<style>
    body,header,main,article,footer,p {
        margin: 0;
        padding: 0;
    }
    header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 50px;
        box-shadow: 0 0 5px #ccc;
        text-align: center;
    }
    main {
        position: absolute;
        top: 50px;
        bottom: 50px;
        left: 0;
        right: 0;
        overflow-y: auto;
    }
    footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        box-shadow: 0 0 5px #ccc;
        text-align: center;
    }
    article {
        background: #00b7ee;
    }
</style>
<body>
<header>
    头部
</header>
<main>
    <article>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
    </article>
</main>
<footer>
    底部
</footer>
<script>
    (function(){
        const winH = document.querySelector('main').clientHeight; //页面可视区域高度
        console.log(winH);
        let noData = false; // 如果没有数据设置为 true，有数据则为 false
        //定义鼠标滚动事件
        document.querySelector('main').addEventListener('scroll',scrollFun);
        function scrollFun () {
            const pageH = document.querySelector('body').clientHeight;
            const scrollT = document.querySelector('main').scrollTop; //滚动条top
            const articleH = document.querySelector('article').clientHeight; //滚动内容高度
            // 滚动到了底部   减20是为了不用彻底滑到底部就触发方法
            if (articleH - 20 <= -(pageH - winH - scrollT)) {
                console.log('滚动到了底部');
                for (let x = 0; x < 12; x++) {
                    document.querySelector('article').innerHTML += '<p>' + x + '</p>';
                }
                document.querySelector('main').removeEventListener('scroll', scrollFun);
                console.log('scrollFun');
                if (!noData) {
                    setTimeout(function () {
                        document.querySelector('main').addEventListener('scroll',scrollFun);
                        console.log('scrollFun');
                    }, 20);
                    // noData = true;
                }
            }
            // 判断滚动内容距滚动的顶部距离，里面可以加入显示回到顶部等
            if (scrollT >= 400) {
                console.log('滚动到了可以显示回到顶部按钮');
            } else {

            }
        }
    })()
</script>
</body>
</html>

CN-cheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
position定位之后的内容滚动到底部加载更多

今天稍微清闲点，想起了前几天项目中遇到的问题，在页面position定位的内容里实现滚动加载更多，之前写了滚动加载更多是没有定位，通过window.onscroll()方法触发，现在的这个需求有些不一样，这里记录一下方便以后参考，下面直接放上代码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="ut...
复制链接

扫一扫