html 滚动条触底加载,JS实现滚动条触底加载更多

原理

1.通过监听滚动区域DOM的scroll事件, 计算出触底

// 滚动可视区域高度 + 当前滚动位置 === 整个滚动高度

scrollDom.clientHeight + scrollDom.scrollTop === scrollDom.scrollHeight

2.触底后触发列表添加, 列表添加使用createDocumentFragment, 将多次插入的DOM先存入内存, 最后一次填充进去, 提高性能, 也方便后面的MutationObserver监听

3.使用MutationObserver监听列表的DOM添加, 添加完毕后, 隐藏加载中提示

示例

参考资料

代码

Document

.hide {

display: none;

}

.scroll {

height: 200px;

width: 300px;

overflow-y: auto;

border: 1px solid #ddd;

}

.loading {

text-align: center;

}

ul {

margin: 0;

padding: 0;

}

li {

padding: 10px;

margin: 10px;

text-align: center;

background: #FFF6F6;

list-style-type: none;

}

• 000000
• 000000
• 000000
• 000000
• 000000

加载中...

let index = 0 // 列表个数

const listDom = document.getElementById('js-list')

const loadingDom = document.getElementById('js-loading')

/**

* 使用MutationObserver监听列表的 DOM 改变

*/

const config = {

attributes: true,

childList: true,

subtree: true

}

const callback = function(mutationsList, observer) {

for (let mutation of mutationsList) {

if (mutation.type === 'childList') {

if (index === 5) {

loadingDom.innerText = '加载完毕'

} else {

loadingDom.classList.add('hide')

}

}

}

}

const observer = new MutationObserver(callback)

observer.observe(listDom, config)

/**

* clientHeight 滚动可视区域高度

* scrollTop 当前滚动位置

* scrollHeight 整个滚动高度

*/

const scrollDom = document.getElementById('js-scroll')

scrollDom.onscroll = () => {

if (scrollDom.clientHeight + parseInt(scrollDom.scrollTop) === scrollDom.scrollHeight) {

if (loadingDom.classList.contains('hide') && index <= 5) {

loadingDom.classList.remove('hide')

addList()

}

if (index >= 5) {

observer.disconnect() // 加载完毕停止监听列表 DOM 变化

}

}

}

/**

* 添加列表

*/

function addList () {

const fragment = document.createDocumentFragment()

setTimeout(() => {

++index

for (let i = 0; i < 5; i++) {

const li = document.createElement('li')

li.innerText = new Array(6).fill(index).join('')

fragment.appendChild(li)

}

listDom.appendChild(fragment)

} , 1000)

}

总结

以上所述是小编给大家介绍的JS实现滚动条触底加载更多,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

时间： 2019-09-19