<html> <head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"> .viewpoint { margin: 20px auto; width: 380px; height: 200px; border: 1px solid #333; overflow-y:scroll; } .canvas { height: 20000px; } </style> </head> <body> <div class="viewpoint"> <div class="canvas"></div> </div> <div class="log"></div> <script> var lineHeight = 10; var data = new Array(2000).fill(0).map((d, i) => ({ v: i })); var buffer = { start: 0, limit: 200/ 10, domain:[0, 20], isAmong(value) { return buffer.domain[0] <= value && value <= buffer.domain[1]; }, preLoad(dir, index) { if (dir === 0) return false; var current = ~~(index/ lineHeight), [start, end] = buffer.domain; // scroll up if (dir < 0 && current < Math.max(0, start + buffer.limit)) { end = buffer.isAmong(current) ? start - 1 : current; start = end - buffer.limit; buffer.domain = [start, end]; return true; } // scroll down if (dir > 0 && current > end - buffer.limit) { start = buffer.isAmong(current) ? end + 1 : current; end = start + buffer.limit; buffer.domain = [start, end]; return true; } return false; } }; var scroller = { dir: 0, // -1,0,-1 preIndex: 0, on(fn) { this.fn = function(index) { log('current', index); scroller.dir = index - scroller.preIndex; if (buffer.preLoad(scroller.dir, scroller.preIndex = index)) { fn(scroller.dir > 0 ? 1 : -1, buffer.domain, index); } }; }, fire() {this.fn.apply(this, arguments);} }; var dataView = { getRange(start, end) { return data.slice(start, end); } }; document.querySelector('.viewpoint').addEventListener('scroll', function(evt) { // console.log(this.scrollTop); scroller.fire(this.scrollTop); }); scroller.on(function(dir, [start, limit], offsetTop) { console.log(dir, start, limit, offsetTop); // console.log(dataView.getRange(start, limit)); }); var $log = document.querySelector('.log'); function log(...args) { $log.innerHTML = args; } </script> </body> </html>