uiComponents/task04-1.html

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>实现滚动加载</title>
    <style>
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    li, ul {
        list-style: none;
    }
    
    .container {
        width: 980px;
        height: 600px;
        margin: 0 auto;
        overflow: auto;
    }
    
    .news__item {
        height: 80px;
        margin-bottom: 20px;
        border: 1px solid #eee;
    }
    </style>
</head>

<body>
    <div class="container">
        <ul class="news" id="news">
            <li class="news__item">1、hello world</li>
            <li class="news__item">2、hello world</li>
            <li class="news__item">3、hello world</li>
            <li class="news__item">4、hello world</li>
            <li class="news__item">5、hello world</li>
            <li class="news__item">6、hello world</li>
            <li class="news__item">7、hello world</li>
            <li class="news__item">8、hello world</li>
            <li class="news__item">9、hello world</li>
            <li class="news__item">10、hello world</li>
        </ul>
    </div>
    <script>
        var wrapper = document.querySelector('.container')
        var container = document.querySelector('.news')
        wrapper.addEventListener('scroll', function() {
            var scrollTop = wrapper.scrollTop;
            if (scrollTop + wrapper.clientHeight >= container.clientHeight) {
                // 触发加载数据        
                loadMore();
            }
        });
        // 表示列表的序号
        var index = 10;

        function loadMore() {
            var content = '';
            for (var i = 0; i < 10; i++) {
                content += '<li class="news__item">' + (++index) + '、hello world</li>'
            }
            var node = document.getElementById('news');
            // 向节点内插入新生成的数据    
            var oldContent = node.innerHTML;
            node.innerHTML = oldContent + content;
        }
    </script>
</body>

</html>