zoukankan      html  css  js  c++  java
  • js 滚动条到底部自动加载数据

    <!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>test</title>
    </head>
    
    <body>
        <div id="box"></div>
        <script type="text/javascript">
            function addData() {
                let box = document.getElementById('box');
                for (let i = 0; i < 50; i++) {
                    let span = document.createElement('span');
                    span.innerHTML = 'test' + i + '<br>';
                    box.appendChild(span);
                }
            }
            addData();
            window.onscroll = function () {
                //scrollTop就是触发滚轮事件时滚轮的高度
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                console.log("滚动距离" + scrollTop);
                //变量windowHeight是可视区的高度
                var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                console.log("可视高度" + windowHeight);
                //变量scrollHeight是滚动条的总高度
                var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
                console.log("总高度" + scrollHeight);
                //判断滚动条是否到底部
                if (scrollTop + windowHeight == scrollHeight) {
                    //加载数据
                    console.log("距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight);
                    addData();
                }
            }
        </script>
    </body>
    
    </html>
  • 相关阅读:
    操作技巧——电脑远程控制
    软件安装——internal error2503/2502
    系统常识——虚拟内存地址
    操作技巧——保障无线上网的技巧
    操作技巧——输入法转换问题
    软件安装——彻底卸载MySQL
    Java——this
    python百度贴吧爬虫
    糗事百科python爬虫
    python请求带cookie
  • 原文地址:https://www.cnblogs.com/chendongbky/p/12160052.html
Copyright © 2011-2022 走看看