JQuery SlideUp 使整个页面滚动 Chrome

Question

看看 Chrome 中的这个 JSFiddle example。

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

到目前为止，还不错。

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

如果您在 Firefox 中尝试相同的 fiddle，您将看到页面 "shakes" 至少有一点不会滚动并且绿色列正确显示。

在 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 的滚动锚点功能引起的，该功能错误地锚定了我示例的第一列而不是中间列，在我的例子中，中间列是主要内容。

我发现通过添加 CSS 样式溢出锚点：none;到第一栏，问题解决

JQuery SlideUp 使整个页面滚动 Chrome

JQuery SlideUp makes the whole page scroll in Chrome

javascript

jquery

scroll

google-chrome

slideup