為什么 Chrome 會自動滾動以包含被點擊的元素？

Question

最近我注意到，在執行 ajax 頁面更新時（附加到一個塊，具體來說，就像在“顯示更多評論”場景中）Chrome 開始執行某種自動滾動以保持被點擊的元素在視圖中，看起來。

這是什么？ 為什么要引入它以及如何擺脫這種行為？

此處的最小（ish）可重現代碼：

 $(document).ready(function() { var html = $(".container").html(); $("#load-more").click(function(){ $(".container").append(html); }) })

 .container { width: 400px; margin: 0 auto; background-color: aqua; padding: 1em; }

 <:DOCTYPE html> <html> <head> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div class="container"> <article> <h3>Foo Bar 1</h3> <p>hello world</p> </article> <article> <h3>Foo Bar 2</h3> <p>hello world</p> </article> <article> <h3>Foo Bar 3</h3> <p>hello world</p> </article> </div> <button id="load-more">load more</button> </body> </html>

請注意在 Chrome(ium) 中單擊的按鈕如何保持在視圖中，這與人們所期望的相反。

Answer 1

這被稱為滾動錨定，並且多年來一直是 Chromium 中的一個功能/標志。

幸運的是，它可以通過 css 禁用。

body {
    overflow-anchor: none;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring

作為 web 的用戶，您可能對滾動錨定解決的問題很熟悉。 您在慢速連接上瀏覽到長頁面並開始滾動閱讀內容； 當您忙於閱讀時，您正在查看的頁面部分突然跳躍。 發生這種情況是因為大圖像或其他一些元素剛剛在內容中加載得更遠。

滾動錨定是一種瀏覽器功能，旨在解決內容跳轉問題，如果內容在用戶已經滾動到文檔的新部分后加載，就會發生這種情況。

為什么 Chrome 會自動滾動以包含被點擊的元素？

問題描述

1 個解決方案

解決方案1
2 已采納 2020-08-12 13:39:16

為什么 Chrome 會自動滾動以包含被點擊的元素？

問題描述

1 個解決方案

解決方案1 2 已采納 2020-08-12 13:39:16

解決方案1
2 已采納 2020-08-12 13:39:16