取得 2021 年捲動問卷調查報告，以及 Chrome 團隊提供的字詞，瞭解這對於 Chromium 和網頁版的優先要務和計畫有何影響。
Chrome 團隊根據 2019 年 MDN 網路 DNA 報告中報告的主要問題，發布捲動和觸控動作問卷調查。2021 年捲動問卷調查報告已準備就緒，Chrome 團隊想分享我們從問卷調查結果中收集到的想法和行動項目。我們希望這些結果可協助瀏覽器廠商和標準群組 瞭解如何改善網頁捲動體驗
查看 2021 年捲動問卷調查報告。
重要結果
問卷調查以匿名方式收集了 880 份，答案為 366 件。
雖然捲動功能的入門是 CSS 的一行，例如 overflow-x:
scroll;，但捲動 API 的介面區域和選項範圍很大，範圍從 JavaScript 到 CSS。以下結果有助於突顯網頁程式開發人員遇到的問題。
網站捲動功能的整體滿意度
問題 27
45%
使用網頁捲動功能
不太或非常不滿意。
這個問題應在問卷調查底部附近，有 26 個捲動用途和功能相關問題後出現。從回應就明顯看出，網路社群 有捲動方面的問題將近一半的作答者表示 整體不滿意等級
我們認為與捲動功能相關的整體看法不應低於這項標準。 這個指標需要變更；這個指標明確表示有待改進。
難以使用捲動功能
第 2 題
43%
回報畫面有點或
非常困難
捲動操作是相當困難。
根據我們的研究，這些難題來自捲動的眾多用途。談到捲動的部分，可能包含以下內容： - 在可捲動區域中放置元素 - 無限捲動 - 捲動連結的動畫 - 捲動連結的動畫 - 捲動畫面邊框間距 - 循環捲動 - 虛擬化捲動
因為缺少瀏覽器功能、複雜的 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%
very 或
非常重要
16%
回報完全不重要
或不太重要
受訪者對於可捲動區域十分重要，提供了另一個信號，說明想要提供高品質捲動功能的必要性。
輪轉
問題 20
87%
使用過輪轉介面。
24%
回報他們
易於管理。
幾乎每一個作答者都會在網路工作中提供輪轉介面，但只有 25% 的人認為輪轉介面可以管理。我們的研究階段很受歡迎，現成輪轉介面是很受歡迎的，但這個統計資料並不令人意外，因為內容似乎沒有什麼問題。
無限捲頁
問題 22
65%
系統「有時」則使用
至「每項專案」
60%
有點或
非常困難。
三分之二的作答者在網路工作中展現無限的捲動速度，而處理數量相同的報告很難做到。另一個高使用率搭配高難度的例子，表示我們還有某個領域需要注意。
雖然您可以搭配使用 content-visibility 和 contain-intrinsic-size，藉此降低長捲動區域的算繪費用，但似乎不太有助於「載入更多」無限捲動的使用者體驗。
捲動連結或捲動觸發的動畫
問題 24
47%
有時
則用於每項專案
56%
回報有些或
非常困難
將近一半的作答者都使用捲動式動畫，而一半的作答者則覺得這很難，再次連結高使用率與難度的連結。
使用內建捲動功能
問題 26
32%
一律或
大多數時間
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 上提供的相片。