JQuery SlideUp 使整个页面滚动 Chrome

JQuery SlideUp makes the whole page scroll in Chrome

看看 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));

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

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