从DOM删除中单击元素时，滚动停止

Question

我在自己的反应虚拟化实现中深处腰部，而烦人的一个小问题之一是，如果我中间单击列表中的项目并开始滚动，一次该元素从滚动滚动的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);
        }
     }
  });
});

基本上，我正在使用删除元件并提高填充的标准方法。在我的反应实现中，这是不同的，但是在这里您会得到基本的功能表示。

Answer 1

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

这可以用CSS3：

完成

div.item {
    pointer-events : none;
}

（不完全确定原因，但我的猜测是，一旦元素消失，事件的起源就会丢失，因此浏览器只是停止做他们在做的事情。）

jsfiddle在这里

Answer 2

也许是派对晚了。我在虚拟滚动器上使用的解决方法是检测何时发生滚动事件，何时没有新事件，我认为滚动已完成。

let scrollTimer = null;
let isScrolling = false;
window.addEventListener('scroll', function() {
  clearTimeout(scrollTimer);
  isScrolling = true;
  
  scrollTimer = setTimeout(()=>{
    isScrolling = false;
  },500);
}, false);

然后，

i然后获取对散布在ISSCrolling时徘徊的元素的引用（使用MouseOver），并防止该元素被卸载，直到IssCrolling为False为止。这有点像杂耍，但有效。我希望我能找到更简单的东西，因为它似乎只是一个镀铬问题。

更新：这似乎是一个已知的错误，即将解决与指针事件有关的问题：没有一个覆盖虚拟滚动器的东西（某人https://codepen.io/flachware/pen/pen/wnmzkav）。我不知道为什么上面的工作要起作用，但是很高兴知道这不需要Chrome103。https：//bugs.chromium.org/p/chromium/issues/issues/detail?id=1330045&q = chrome Scroll＆amp；; can = 2＆amp; sort = - 开放