iScroll实现的滚动加载-demo-蚊子-前端博客

COPYHTML
<div class="wrapper">
    <div class="content"></div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll-probe.min.js"></script>

COPYCSS
wrapper {
  position: relative;
  overflow: hidden;
  height: 100vh;
}
.content {
  position: relative;
}
.item {
  min-height: 80px;
  border-bottom: 1px solid #cccccc;
  width: 100%;
}
img {
  width: 340px;
}

COPYJAVASCRIPT
function updateData(start, count) {
    var div = document.createDocumentFragment();
    for(var i=start, len=start+count; i<len; i++) {
        var item = document.createElement('div');
        item.className = 'item';

        item.innerHTML = '<p>'+i+'</p><p><img src="https://mat1.gtimg.com/qqcdn/tupload/1652494466388.jpeg?v='+i+'"></p>';
        div.appendChild(item);
    }
    document.querySelector('.content').appendChild(div);
}
// http://wiki.jikexueyuan.com/project/iscroll-5/customevents.html
var myScroller = new IScroll(document.querySelector('.wrapper'), {
    mouseWheel: true,
    probeType: 2
});

var start = 0;
var count = 20;
updateData(start, count);
myScroller.on('scroll', function() {
    if (this.y - this.maxScrollY < 120) {
        start += count;
        updateData(start, count);
        myScroller.refresh();
    }
})

document.addEventListener('touchmove', function (e) {
    e.preventDefault();
}, {
    capture: false,
    passive: false
});