iscroll实现的无限滚动

回到文章>>

COPYHTML

<div class="wrapper"> <div class="content"> <div class="item">0</div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div> </div>

COPYCSS

.wrapper { position: relative; overflow: hidden; height: 100vh; } .content { position: relative; } .item { min-height: 80px; height: 80px; border-bottom: 1px solid #cccccc; position: absolute; width: 100%; } .last { background-color: #f4d0f9; }

COPYJAVASCRIPT

var myScroller = new IScroll(document.querySelector('.wrapper'), { mouseWheel: true, infiniteElements: '.content .item', dataset: function(start, count) { // 根据start和count生成测试数据 var data = []; for(var i=0; i<count; i++) { data.push( start + i ); } this.updateCache(start, data) }, dataFiller: function(el, data) { el.innerHTML = data; }, cacheSize: 20 }); document.addEventListener('touchmove', function (e) { e.preventDefault(); }, { capture: false, passive: false });
新窗口打开