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中滾動

回答

相關問題