<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 {
position: relative;
height: 20000px;
}
.row {
position: absolute;
height: 10px;
line-height: 10px;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div class="viewpoint">
<div class="canvas"></div>
</div>
<div class="log"></div>
<script>
var lineHeight = 10, viewpointHeight = 200, limit = Math.ceil(viewpointHeight/ lineHeight);
var data = new Array(2000).fill(0).map((d, i) => ({ v: i }));
var buffer = {
start: 0,
end: limit,
limit: limit,
total: data.length,
domain:[0, limit],
isAmong(index) {
return buffer.start <= index && index <= buffer.end;
},
preLoad(dir, current) {
if (dir === 0) return false;
var start = buffer.start;
var end = buffer.end;
// scroll up
if (dir < 0 && start === 0) return false;
if (dir < 0 && current < Math.max(0, start + buffer.limit)) {
end = Math.max(buffer.isAmong(current) ? start : current, buffer.limit);
start = Math.max(0, end - buffer.limit);
buffer.domain = [start, end];
buffer.start = start;
buffer.end = Math.min(start + 3 * buffer.limit, buffer.end);
return true;
}
// scroll down
if (dir > 0 && end === buffer.total) return false;
if (dir > 0 && current > end - buffer.limit) {
start = buffer.isAmong(current) ? end : current;
end = Math.min(buffer.total, start + buffer.limit);
buffer.domain = [start, end];
buffer.end = end;
buffer.start = Math.max(buffer.start, end - 3 * buffer.limit);
return true;
}
return false;
}
};
var scroller = {
dir: 0, // -1,0,-1
preIndex: 0,
index: 0,
on(fn) {
this.fn = function(offsetTop) {
log('current', offsetTop);
scroller.dir = offsetTop - scroller.preIndex;
scroller.index = ~~((scroller.preIndex = offsetTop)/ lineHeight);
if (buffer.preLoad(scroller.dir, scroller.index)) {
fn(
scroller.dir > 0 ? 1 : -1,
buffer.domain,
buffer.start,
buffer.end,
scroller.index,
buffer.total
);
}
};
},
fire() {this.fn.apply(this, arguments);}
};
var dataView = {
nodeList: [],
fullNodes() {
return dataView.nodeList.length >= 3 * limit;
},
getNodes(dir, first, last) {
if (dataView.fullNodes()) {
let selected;
if (dir > 0) {
selected = dataView.nodeList.slice(0, last - first);
dataView.nodeList = dataView.nodeList.slice(last - first + 1).concat(selected);
} else {
selected = dataView.nodeList.slice(first - last);
dataView.nodeList = selected.concat(dataView.nodeList.slice(0, first - last - 1));
}
return selected;
}
var nodes = [];
for (let i = first; i <= last; i++) {
nodes.push(function() {
var $node = $('<div/>').addClass('row');
return function(row, top) {
return $node.css('top', top * lineHeight).text(row.v);
}
}());
}
if (dir > 0) {
dataView.nodeList = dataView.nodeList.concat(nodes);
} else {
dataView.nodeList = nodes.concat(dataView.nodeList);
}
return nodes;
},
render(dir, [first, last], start, end) {
var nodes = dataView.getNodes(dir, first, last);
if (dataView.isFullNodes) {
data.slice(first, last).forEach((row, i) => {
nodes[i](row, first + i);
});
return;
}
var parent = $('<div/>');
data.slice(first, last).forEach((row, i) => {
parent.append(nodes[i](row, first + i));
});
$('.canvas').append(parent.children());
if (dataView.fullNodes()) {
dataView.isFullNodes = true;
}
}
};
document.querySelector('.viewpoint').addEventListener('scroll', function(evt) {
// console.log(this.scrollTop);
scroller.fire(this.scrollTop);
});
scroller.on(function(dir, domain, start, end, offsetTop, total) {
console.log(`${dir}, add:[${domain}] [${start}-${end}], ${offsetTop}, nodes:${dataView.nodeList.length}`);
dataView.render(dir, domain, start, end);
});
var $log = document.querySelector('.log');
function log(...args) {
$log.innerHTML = args;
}
</script>
</body>
</html>
