javascript - JQuery SlideUp 在 Chrome 中使整个页面滚动

Question

看看这个 JSFiddle example在 Chrome 中。

如果您按原样运行代码，而不滚动任何内容，您应该会看到绿色列中的项目每 3 秒循环一次。顶部项目向上滑动消失，所有其他项目向上移动。该项目重新出现在列表底部，因此如果您等待足够长的时间，您会看到它移回原处。

到目前为止，一切顺利。

但是现在，如果您向下滚动“页面”以查看黄色列中的更多项目或阅读红色列中的文本，您会看到现在，每次在绿色列的项目中滑动时，整个页面也会向后滚动，慢慢回到顶部，此时又恢复正常。

如果您在 Firefox 中尝试相同的操作，您会发现页面会“晃动”一点，至少不会滚动，并且绿色列会正确显示。

在 Edge 中，一切都按预期完美运行。

知道如何防止 Chrome 中出现这种奇怪的行为吗？

谢谢!

因为我似乎需要包含一些代码(很奇怪!)，所以这是主要的循环代码:

this.$cyclingItem = this.$container.find('div.item').first();    
this.$cyclingItem.slideUp(slideDelay, function() {
  this.$cyclingItem.hide();
  this.$container.append(this.$cyclingItem);
  this.$cyclingItem.fadeIn(function() {
    this.$cyclingItem = null;
  }.bind(this));
}.bind(this));

Answer 1

感谢 jQuery 的人们，我找到了正确的方向。该问题是由 Chroms 的滚动 anchor 功能引起的，该功能错误地锚定了示例的第一列，而不是中间的列，在我的例子中，中间的列是主要内容。

我发现通过添加CSS样式overflow-anchor: none;到第一栏，问题就解决了。