Question

我在自己的React虚拟化实现中深陷其中，而且令我烦恼的一个小问题是，如果我中间点击列表中的某个项目并开始滚动，那么该元素将从DOM滚动暂停。我的第一个理论是，该元素正在获得关注，并且预防这个问题可以解决问题，但我所尝试的并没有起作用，我甚至不确定这个问题是什么？

如何防止这种情况发生？

请参阅此小提琴进行基本演示：

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

从DOM

1 个答案: