js jq 滚动到底部加载更多

佚名 6年前 (2019-04-25) 随笔 531人围观抢沙发百度已收录

<!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>Document</title>
    <style type="text/css">
        body {
            background-color: #808080;
        }

        * {
            margin: 0;
            padding: 0;
        }

        #main {
            margin: 0 auto;
            width: 460px;
            height: 300px;
            overflow: auto;
        }

        #content div {
            height: 20px;
            width: 100px;
        }
    </style>
</head>

<body>

    <div id="main">
        <div id="content"></div>
        <div id="tip">已经到最底部了！</div>
    </div>
    <script type="text/javascript" src="https://blog-static.cnblogs.com/files/justSmile2/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        function add() {
            for (var i = 0, j = 50; i < j; i++) {
                $("<div></div>", {
                    text: "hello" + i
                }).appendTo($("#content"));
            }
        };
        add();
        $("#tip").css("display", "none");
        $("#main").scroll(function () {
            var conHeight = $("#content").height();
            var sliderHeight = $(this).scrollTop();
            var winHeight = $(this).height();
            if (sliderHeight + winHeight >= conHeight - 20) {
                $("#tip").css("display", "block");
                setTimeout(function () {
                    $("#tip").css("display", "none");
                }, 600);
                add();
            }
        });
    </script>
</body>

</html>

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

<!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>Document</title>
    <style type="text/css">
        body {
            background-color: #808080;
        }

        #main {
            margin: 0 auto;
            width: 960px;
        }

        #content {
            position: absolute;
            width: 960px;
        }

        #img {
            margin: 0;
            padding: 0;
        }

        #img li {
            list-style-type: none;
            background-color: salmon;
            margin: 0;
            margin-top: 10px;
            border-bottom: solid 1px hotpink;
            text-align: center;
            height: 30px;
        }
    </style>
</head>

<body>
    <div id="main">
        <div id="content">
            <ul id="img">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
                <li>13</li>
                <li>14</li>
                <li>15</li>
                <li>16</li>
                <li>17</li>
                <li>18</li>
                <li>19</li>
                <li>20</li>
                <li>21</li>
                <li>22</li>
                <li>23</li>
                <li>24</li>
                <li>25</li>
                <li>26</li>
                <li>27</li>
                <li>28</li>
                <li>29</li>
                <li>30</li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        var content = document.getElementById("img").innerHTML;

        function addLi() {
            document.getElementById("img").innerHTML += content;
        }
        window.onscroll = function () {
            var htmlHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
            var clientHeight = document.body.clientHeight || document.documentElement.clientHeight;
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            if (scrollTop + clientHeight >= htmlHeight - 20) {
                addLi();
            }
        };
    </script>
</body>

</html>