DEMO
功能： 實(shí)現(xiàn)聽(tīng)過(guò)滾動(dòng)無(wú)限刷新增添新元素
監(jiān)聽(tīng) scroll 事件
通過(guò)監(jiān)聽(tīng) scroll 事件长已，在頁(yè)面滾動(dòng)到距離底部不到 100px 時(shí)盗誊，開(kāi)始增添元素
image.png
具體如下懈息，計(jì)算出距離底部位置
document.addEventListener('scroll', function(e) {
if (document.documentElement.offsetHeight - pageYOffset - innerHeight < 100) {
//此時(shí)操作 DOM 節(jié)點(diǎn)
console.log('adding now....')
}
})
創(chuàng)建 加入 dom 節(jié)點(diǎn)
當(dāng)滾動(dòng)到 底部 100px 區(qū)域時(shí)嘹裂，開(kāi)始增添元素芙代，為模擬真實(shí)頁(yè)面獲取時(shí)要請(qǐng)求網(wǎng)絡(luò)帶來(lái)的時(shí)間損耗鼓黔，此處通過(guò) setTimeout 模擬延時(shí)請(qǐng)求旭旭，
//此時(shí)操作 DOM 節(jié)點(diǎn)
setTimeout(() => {
console.log('adding now....')
new Array(10).fill(0).forEach(() => {
var li = document.createElement('li')
list.appendChild(li)
})
}, 1000)
修復(fù)重復(fù)執(zhí)行
上面的代碼有個(gè)問(wèn)題谎脯，當(dāng)滾動(dòng)到底部100px時(shí)，在此滾動(dòng)持寄，同時(shí)會(huì)繼續(xù)觸發(fā)事件源梭，一般我們不會(huì)有這樣的需求
image.png
再次完善代碼，設(shè)定狀態(tài) 標(biāo)簽
loading 稍味，以此來(lái)判斷事件狀態(tài)
//初始化 loading
var loading = false
loadingText.style.display = 'none'
document.addEventListener('scroll', function(e) {
// 此處判斷 loading 狀態(tài)
if (loading === false && ... < 100) {
// 設(shè)定 loading 狀態(tài)為 true
loading = true
loadingText.style.display = 'block'
setTimeout(() => {
// 操作 DOM
// 添加完元素废麻，初始化 loading 狀態(tài)為 false
loading = false
loadingText.style.display = 'none'
}, 1000)
}
})
CSS修飾
盡肯能隨機(jī)化創(chuàng)建元素顏色，
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);
}
