html区域滚动原理,页面无限滚动实现原理

前端无限滚动一般指元素滚动到最后，动态加载更多数据。实现原理大只如下：

假设outer为外层容器， 则当滚动条滚动到最低端时

outer.scrollHeight = outer.scrollTop + outer.offsetHeight；

我们希望滚动到快到底部时触发加载，可以为outer添加滚动监听，当差值小于10像素时加载新数据, 其中注意滚动到小于10像素后会连续多次触发滚动事件，所以注意事件的节流处理(一个函数未执行完不再执行第二次)，以下是一个简单示例：

Document

#box{

width: 300px;

height: 300px;

overflow: auto;

}

#item{

height: 400px;

background-color: aquamarine;

}

document.getElementById('box').addEventListener('scroll', function() {

if (!this.delay) {

this.delay = true;

const st = setTimeout(() => {

this.scrollTop + this.offsetHeight -10 > this.scrollHeight;

const item = document.createElement('div');

item.id = 'item';

this.appendChild(item);

this.delay = false;

clearTimeout(st);

}, 1000);

}

}, false);