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

在Chrome中查看此JSFiddle example。JQuery SlideUp使整个页面在Chrome中滚动

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

到目前为止，这么好。

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

如果您在Firefox中尝试使用相同的小提琴，您将看到页面“摇晃”了一下，至少不会滚动并且绿色列显示正确。

在边缘，一切都按预期完美运作。

任何想法如何防止在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));

来源

2017-10-08 Gilles jr Bisson

有没有人看过我提供的代码？关于为什么整个页面开始在Chrome中滚动而不仅仅是应用SlideUp（）的元素的任何线索？ –

由于人的jQuery，我指出了正确的方向。这个问题是由Chroms的滚动锚定功能造成的，它错误地锚定了我的示例的第一列，而不是中间的那个，在我的情况下，它是主要内容。

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

来源

2017-10-25 02:12:50

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

回答

相关问题