javascript - 当中键单击的元素从 DOM 中删除时滚动停止

Question

我对自己的 React 虚拟化实现很深入，一直困扰我的小问题之一是，如果我中键单击列表中的某个元素并开始滚动，一旦该元素从 DOM 中删除，滚动停止。我的第一个理论是，该元素正在获得关注，并且阻止这种情况可以解决问题，但我所尝试的方法并没有起作用，我什至不确定这就是问题所在。

如何防止这种情况发生？

请参阅此 fiddle 的基本演示:

https://jsfiddle.net/v169xkym/2/

以及处理虚拟化的相关代码:

$('#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);
        }
     }
  });
});

基本上，我使用删除元素并增加填充的标准方法。在我的 React 实现中，处理方式有所不同，但在这里您可以获得基本的功能表示。

Answer 1

您可以通过不让消失的元素注册鼠标事件来解决此问题。

这可以通过 CSS3 来完成:

div.item {
    pointer-events : none;
}

(不完全确定原因，但我的猜测是，一旦元素消失，事件的起源就丢失了，所以浏览器只是停止做他们正在做的事情。)

Jsfiddle here