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>
  • 相关阅读:
    JAVA传值与传址
    JAVA中的栈和堆
    for语句输出图形
    Linux下ps命令详解(转载)
    BMC介绍
    JVM 优化、内存泄露排查、gc.log 分析方法等(转载)
    动态从zookeeper读取kafka信息
    centos 查看文件系统类型
    TCPdump抓包命令详解
    Linux Tab键自动补齐
  • 原文地址:https://www.cnblogs.com/chendongbky/p/12160052.html
Copyright © 2011-2022 走看看