針對網頁開發者的滾動錨定功能

文 | Unbounce 成員 Steve Kobes

網頁的優勢之一在於可以漸進式載入，這意味著，無需安裝步驟，在網站仍在載入時，使用者幾乎便可立即開始使用內容。但漸進式載入也可能帶來麻煩，例如，當載入螢幕外內容並向下擠壓螢幕上當前顯示的內容時，會出現頁面意外跳動的問題。在移動裝置上，這種情況可能更加糟糕，因為較小的螢幕意味著有更多的內容未顯式在螢幕上，也就更容易出現頁面跳動的情況。

Chrome 自其問世之初以來，便一直抵制不良或濫用內容。例如，安全瀏覽會在使用者訪問惡意網站之前給使用者發出警告，標籤上的視覺指示讓使用者能夠快速追查出意外噪音的來源。與為防止使用者遭遇不良體驗而設計的其他功能類似，自第 56 版起，Chrome 便採用了一項名為滾動錨定的新功能來防止這些意外的頁面跳動。這項功能通過將滾動位置鎖定在螢幕上的某個元素上，使使用者即便在繼續載入螢幕外內容時也能保持在同一位置。

▲ 並排比較啟用（左）和禁用（右）滾動錨定功能的網頁。

由於網頁的表現方式千變萬化，滾動錨定對某些內容可能並不適用，或者可能會導致不正確的行為。為此，此功能還提供了“overflow-anchor” CSS 屬性，以便覆蓋此功能。要進一步減少潛在問題，在複雜的互動式佈局中，還可通過抑制觸發器來禁用滾動錨定，而在後退/前進導航中，則可允許恢復滾動。

如今，每檢視一個頁面，滾動錨定便為您避免了大約三次頁面跳動，但有您的幫助，它還可以做得更好。通過加入滾動錨定網路平臺孵化器社群團體參與滾動錨定的開發，通過 g.co/reportbadreflow 提交反饋，並設計一氣呵成的網站或服務。

瞭解更多細節，檢視文內所有連結，請點選文末“閱讀原文”。

推薦閱讀：

更快速、更精簡的頁面重新載入

在Chrome (Android 版) 中引入WebVR API

在iOS上將Chrome開源！

Chrome 57 Beta 新特性

點選「閱讀原文」，檢視文內連結