DEMO
功能： 实现听过滚动无限刷新增添新元素
监听 scroll 事件
通过监听 scroll 事件，在页面滚动到距离底部不到 100px 时，开始增添元素
image.png
具体如下，计算出距离底部位置
document.addEventListener('scroll', function(e) {
if (document.documentElement.offsetHeight - pageYOffset - innerHeight < 100) {
//此时操作 DOM 节点
console.log('adding now....')
}
})
创建 加入 dom 节点
当滚动到 底部 100px 区域时，开始增添元素，为模拟真实页面获取时要请求网络带来的时间损耗，此处通过 setTimeout 模拟延时请求，
//此时操作 DOM 节点
setTimeout(() => {
console.log('adding now....')
new Array(10).fill(0).forEach(() => {
var li = document.createElement('li')
list.appendChild(li)
})
}, 1000)
修复重复执行
上面的代码有个问题，当滚动到底部100px时，在此滚动，同时会继续触发事件，一般我们不会有这样的需求
image.png
再次完善代码，设定状态 标签
loading ，以此来判断事件状态
//初始化 loading
var loading = false
loadingText.style.display = 'none'
document.addEventListener('scroll', function(e) {
// 此处判断 loading 状态
if (loading === false && ... < 100) {
// 设定 loading 状态为 true
loading = true
loadingText.style.display = 'block'
setTimeout(() => {
// 操作 DOM
// 添加完元素，初始化 loading 状态为 false
loading = false
loadingText.style.display = 'none'
}, 1000)
}
})
CSS修饰
尽肯能随机化创建元素颜色，
setTimeout(() => {
//...
new Array(10).fill(0).forEach(() => {
var li = document.createElement('li')
let c = list.childElementCount ** 2
li.style.background = `rgba(${(c - 90) % 255},${c % 255},${(c + 110) % 255})`
li.innerHTML = li.style.background
list.appendChild(li)
})
//...
}, 1000)
li {
margin: 5px;
transition: .2s
}
li:hover{
transform: translate3d(0, -3px, 0);
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
