页面上存在class=container的节点A请阅读给定javascript代码,为节点A实现滚动加载功能,具体效果参考以下图片请在TODO处补全说明的代码请不要手动修改html和css请不要修改javascript代码中已经给定的参数不要使用第三方插件
加载中...
.container{ width: 300px; height: 200px; border: 1px solid #efeff4; background: #ffffff; overflow: auto; } .card{ display: flex; align-items: center; justify-content: center; height: 150px; background: #25bb9b; margin: 10px; color: #ffffff; border-radius: 8px; }
<div class="container"></div>
new InfiniteScroll({ // TODO: 请获取class=container的节点 el: null, // 触发加载的距离底部的阈值,单位px distance: 100, call: (el, index) => { // TODO: 请创建一个div节点,并将其插入到el节点中;该节点的class=card,内容为序号index } }); function InfiniteScroll(param) { const that = this; const container = param.el; const distance = +param.distance || 0; if (!container) return; that.index = 0; // TODO: 请为container绑定scroll事件,回调为函数_handleScroll _handleScroll(); function _handleScroll() { const scrollTop = container.scrollTop; const contentHeight = container.scrollHeight; const height = container.clientHeight; // TODO: 请判断是否需要触发滚动到底部的回调 const shouldTrigger = false; if (!shouldTrigger) return; // TODO: 请调用call回调,注意提供正确的参数 _handleScroll(); } }