I am knee-deep in developing my own React virtualization feature and encountering a minor annoyance. When I middle click on an item in the list and start scrolling, the scrolling stops once that item is removed from the DOM. My initial thought was that the element was gaining focus causing the issue, but my attempts to prevent this have not been successful, and I'm unsure if that's even the underlying problem.
How can I resolve this issue?
Take a look at this fiddle for a simple demonstration:
https://jsfiddle.net/v169xkym/2/
Here is the relevant portion of code responsible for virtualization:
$('#container').scroll(function(e) {
$('#container').children().each(function(i) {
if ($('.item:eq(' + i + ')').length > 0) {
if ($('.item:eq(' + i + ')').offset().top < 0) {
$('.item:eq(' + i + ')').remove();
$('#topPadding').height($('#topPadding').height() + 45);
}
}
});
});
Essentially, I am following the standard approach of removing the element and adjusting the padding. In my React setup, this process is handled differently, but here you have a basic functional example.