歡迎參閱 2021 年捲動調查報告，以及 Chrome 團隊的說明，瞭解這項調查結果對 Chromium 和網頁優先事項及計畫的影響。
今年 4 月，Chrome 團隊根據 2019 年 MDN Web DNA 報告中回報的熱門問題，發布了捲動和觸控動作問卷調查。2021 年捲動調查報告已出爐，Chrome 團隊想分享從調查結果中歸納出的一些想法和行動項目。我們希望這些結果能協助瀏覽器供應商和標準團體瞭解如何改善網頁捲動功能。
查看2021 年捲動調查報告。
重要結果
這項問卷調查共收集到 880 份匿名回覆，其中 366 份回覆回答了所有問題。
雖然只要一行 CSS (例如 overflow-x:
scroll;) 就能開始使用捲動功能，但捲動 API 和選項的涵蓋範圍很廣，從 JavaScript 到 CSS 都有。下列結果有助於凸顯網頁開發人員遇到的問題。
對網頁捲動的整體滿意度
第 27 題
45%
不太或非常不滿意
網頁捲動。
這項問題刻意放在問卷調查的尾端，也就是 26 個捲動使用案例和功能相關問題之後。從回覆內容來看，網路社群顯然對捲動功能有許多疑問。近半數受訪者表示整體不滿意。
我們認為使用捲軸的整體情緒不應如此低落。 這項指標需要變更，因為這清楚顯示有待完成的工作。
難以使用捲動功能
第 2 題
43%
回報有點或
極難
使用捲動功能。
根據我們的研究，這些困難源自於捲動的用途眾多。捲動可能包括： - 在可捲動區域內放置元素 - 無限捲動 - 捲動連結動畫 - 輪播 - ScrollView 邊框間距 - 循環捲動 - 虛擬化捲動
缺少瀏覽器功能、複雜的 JavaScript，以及需要支援觸控、鍵盤和遊戲手把等輸入模式，都讓這些事情變得更加困難。
觸控互動的重要性
第 3 題
51%
將觸控互動回報為
對工作非常或極為重要
。
行動版網站的使用者在造訪統計資料中仍持續增加，因此有半數受訪者表示觸控對他們在網路上工作非常重要，這並不令人意外。這表示 CSS 捲動快照和 touch-action 等網路功能需要特別注意，才能提供高品質的觸控互動。
使用 Tab 鍵或遊戲手把導覽時遇到困難
問題 5a
44%
回報有點或非常難以使用遊戲手把和分頁鍵導覽。
捲動包括鍵盤方向鍵、Tab 鍵、按下空白鍵和遊戲手把等導覽方法，在執行自訂捲動工作時，可能難以納入這些方法。近半數受訪者表示，納入這些輸入內容有些或極為困難。
學習 touch-action
問題 9
50%
報告學習有關
`touch-action: manipulation`
的調查結果。
問卷調查中，部分問題是詢問您是否使用特定 API，可能的答案為「是」、「否」或「今天才學到」。其中一項值得注意的意見回饋是，許多人表示他們是透過這項問卷調查瞭解 touch-action，因為在建構需要在捲動範圍內互動的自訂觸控手勢時，這項屬性至關重要。
循環捲動
第 27 題
58%
有時、經常或每個專案的報表
使用週期性捲動。
60 秒後會從 0 開始。
對於網頁平台幾乎或完全不支援的捲動功能而言，這些數字偏高。 因此，這項功能通常會造成大量技術債，因為系統會重複或插入 JavaScript 來強制產生效果。這項功能很適合用於產品輪播，以及選取以秒或分鐘為單位的時間，提供循環捲動效果。
可捲動區域是否重要
第 2 題
55%
非常或
極為重要
16%
報告完全不重要
或有點重要
受訪者強烈認為可捲動區域非常重要，這也顯示要提供高品質的捲動體驗並不容易。
輪轉介面
第 20 題
87%
使用輪播內容。
24%
報告指出，這些裝置
易於管理。
幾乎所有受訪者都會在網頁作品中提供輪播內容，但只有 25% 的人認為輪播內容易於管理。在我們的研究中，現成輪播內容很受歡迎，但這項統計資料讓我們感到驚訝，因為這聽起來並非很完善的解決方案。
無限捲頁
第 22 題
65%
有時
每個專案
60%
有點或
非常困難。
有三分之二的受訪者在網頁工作中提供無限捲動功能，但也有相同比例的受訪者表示這項功能難以實作。這是高使用率搭配高難度的另一個例子，顯示我們需要注意這個領域。
雖然 content-visibility 和 contain-intrinsic-size 可以合併使用，以減少長捲動區域的算繪成本，但似乎無法協助「載入更多」無限捲動 UX。
捲動連結或捲動觸發的動畫
第 24 題
47%
有時
每個專案
56%
回報「有點困難」或「非常困難」
近半數受訪者使用捲動協調式動畫，且半數受訪者覺得難以使用，再次顯示高使用率與難度之間的關聯。
使用內建捲動功能競爭
第 26 題
32%
一律或
大部分時間
50%
有時
手機和平板電腦應用程式內建的捲動和觸控互動功能，經常被視為網路可追趕的明確目標。這些功能包括捲動連結動畫、程式化介面、語音整合、捲動提示和「下拉更新」API。
只有一半的受訪者認為有時可以比照內建捲動功能。
在網頁上建立捲動互動的整體滿意度
第 27 題
問卷調查結果
問卷調查結果分為四類： 相容性、 教育、 API 和 功能。
相容性
Chrome 團隊已宣布目標，要減少網頁相容性問題，包括捲動相容性。
首先要解決的三個相容性問題：
1. 支援水平捲動。
1. overscroll-behavior 跨瀏覽器。
1. 從 -webkit-scrollbar 移除前置字元，並遵循標準。
教育
問卷調查結果顯示，我們需要加強 touch-action 和邏輯屬性的教育。瀏覽器是國際版面配置的先驅，但顯然未獲得充分利用或遭到誤解。
應著重的領域：
1. touch-action
1. 邏輯屬性
API
捲動貼齊功能的使用率日益提高，開發人員也表示希望與熱門程式庫和外掛程式互通使用這項功能。縮小 CSS 與外掛程式庫之間的差距，有助於提升捲動貼齊開發人員的滿意度，以及使用者體驗。
我們會將 API 工作重點放在 scroll-snap：
1. API 在各瀏覽器中的適用性和相容性。1. 開始使用新的 CSS API，例如 scroll-start。1. 開始處理新的 JS 事件，例如 snapChanged()。
功能
調查結果顯示，使用者在網頁上使用某些特定類型的捲動相關元件時會遇到困難，因為平台未提供相關基本元素，因此他們必須使用外掛程式或投入大量心力才能建構這些元件。我們希望深入探討這個領域。
開發人員難以建構的功能包括： 1. 輪轉介面 1. 虛擬捲動 1. 無限捲頁
資源
縮圖圖片：Unsplash 上的 Taylor Wilcox 相片。