定义一个scroll容器
<body>
<div id="app">
</div>
</body>
javascript
var data =[1, 2, 3, 4];
function render() {
document.getElementById('app').innerHTML = '';
let tempHtml = ''
data.forEach(item => {
tempHtml += ` <div class="block">
${item}
</div>`;
})
app.innerHTML = tempHtml;
}
window.onload = _ => {
console.log(app);
render();
app.addEventListener('scroll', e => {
const { scrollTop: upOverHeight, clientHeight, scrollHeight: allHeight } = app;
if (upOverHeight + clientHeight + 10 > allHeight) {
console.log('滚动到底')
data.push(Math.random())
data.push(Math.random())
data.push(Math.random())
render();
}
console.log(data)
console.warn(app.scrollHeight, app.clientHeight, app.scrollTop);
});
};
样式
#app {
background-color: #fafafa;
width: 500px;
height: 500px;
overflow: auto;
box-shadow: 0 0 8px #aaaaaa;
}
.block {
background-color: white;
width: 480px;
line-height: 200px;
height: 200px;
margin: 10px 0;
text-align: center;
}
2961
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
