取得 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，因為在建立需要在捲動中互動的自訂觸控手勢時，touch-action 是重要的屬性。
循環捲動
第 27 題
58%
使用循環捲動功能，針對「有時」或「每項專案」
回報。
在 60 秒後再次從 0 開始。
這些數字對於捲動功能來說太高，因為網站平台幾乎不支援這項功能。因此，這類功能經常會因重複或注入 JavaScript 來強制效果而產生大量技術債務。產品輪轉介面相當熱門，適合用來提供週期性捲動選擇時間 (單位為秒或分鐘)。
是否需要可捲動區域
第 2 題
55%
非常重要 或
非常重要
16%
回報「完全不重要」
或「有點重要」
受訪者極度認為可捲動區域的重要性，因此再次發出訊號，說明提供高品質捲動功能所需的難題。
輪轉介面
第 20 題
87%
使用輪轉介面。
24%
報告指出，
易於管理。
幾乎所有受訪者都會在網站上提供輪轉介面，但只有 25% 的人認為輪轉介面容易管理。現成的輪轉介面在研究期間是很受歡迎的，但這項統計資料無法完全解決，令我們感到驚訝。
無限捲頁
第 22 題
65%
偶爾使用
到每個專案
60%
有點困難或
非常困難。
三分之二的受訪者在網頁工作中提供無限捲動功能，而同樣有三分之二的人表示這項功能難以實作。這又是一個使用率高、難度也高的例子，顯示出需要關注的領域。
雖然 content-visibility 和 contain-intrinsic-size 可搭配使用，以減少長可捲動區域的算繪成本，但似乎無法改善「載入更多」無限捲動使用者體驗。
捲動連結或捲動觸發動畫
第 24 題
47%
偶爾
使用它
(適用於所有專案)
56%
回報「有點困難」或
「非常困難」
近半的受訪者使用捲動式動畫，而一半的受訪者認為這項功能難以使用，再次證明使用率高與難度高之間的關聯。
與內建捲動功能競爭
第 26 題
32%
always 或
多數時間
50%
有時
手機和平板電腦應用程式內建的捲動和觸控互動功能，經常被視為網路可以追上的明確目標。這些功能包括捲動連結動畫、程式輔助介面、語音整合、捲動提示和下拉即可重新整理 API。
只有一半的受訪者認為，只有在某些情況下，他們才可能獲得與內建捲動功能相同的體驗。
整體滿意度：在網路上建立捲動互動
第 27 題
問卷調查重點
相容性
Chrome 團隊已宣告目標，要減少網頁相容性問題的數量，包括捲動相容性。
前三個需要關注的相容性問題：
1. 水平捲動相容性。1. overscroll-behavior 跨瀏覽器。1. 從 -webkit-scrollbar 移除前置字元，並遵循標準。
教育
問卷調查結果顯示，我們需要針對 touch-action 和邏輯屬性提供更多教育訓練。瀏覽器是國際版面配置的先驅，但顯然未充分發揮效用或遭到誤解。
重點領域：
1. touch-action
1. 邏輯屬性
API
捲動自動對齊功能的使用率不斷攀升，開發人員也回應希望能與熱門程式庫和外掛程式互通使用這些功能。縮小 CSS 和外掛程式程式庫之間的此差距，有助於改善捲動貼齊開發人員和使用者體驗。
我們將專注於 scroll-snap 的 API 工作：
1. API 可用性和瀏覽器相容性。1. 開始著手新 CSS API，例如 scroll-start。1. 開始處理 新的 JS 事件，例如 snapChanged()。
功能
調查結果顯示，使用者在瀏覽網頁時，會遇到某些與捲動相關的元件類型問題，因為平台未提供所需的基礎元件，因此使用者必須使用外掛程式或耗費大量心力才能建構這些元件。我們希望進一步探討這個領域。
開發人員難以建構的功能包括： 1. 輪轉介面 1. 虛擬捲動 1. 無限捲頁
資源
縮圖：Taylor Wilcox 透過 Unsplash 提供的相片。