获取 2021 年滚动式问卷调查报告，以及 Chrome 团队分享的信息，了解此次变更对 Chromium 和 Web 的优先事项和计划有何影响。
4 月，Chrome 团队根据 2019 年 MDN Web DNA 报告中报告的热门问题发布了一个滚动和触摸操作调查问卷。2021 年滚动调查报告已准备就绪，Chrome 团队想分享一些从调查结果中得到的想法和行动项。我们希望这些结果可以帮助浏览器供应商和标准团队了解如何改进网页滚动功能。
查看 2021 年滚动式问卷调查报告。
值得关注的结果
该调查问卷匿名收集了 880 份提交内容，其中 366 份回答了所有问题。
虽然开始滚动是一行 CSS（例如 overflow-x:
scroll;）的，但滚动 API 和选项的 Surface 区域很大，从 JavaScript 到 CSS。以下结果有助于重点说明 Web 开发者遇到的问题。
对网页滚动的总体满意度
问题 27
45%
对网页滚动功能总体上不太满意或非常不满意
。
此问题被特意放在调查问卷结尾处，置于关于 26 个滚动用例和功能的问题后面。从响应中可以明显看出，网络社区的滚动操作非常棘手。近一半的受访者表示整体不满意。
我们认为，使用滚动功能的总体看法不应该那么低。此指标需要更改，它明确表明了需要采取措施。
难以使用滚动
问题 2
43%
有人表示，略微或
非常难处理滚动
。
根据我们的研究，这些困难源自滚动的众多用例。当我们谈论滚动时，可能包括： - 将元素定位在可滚动区域内 - 无限滚动 - 滚动关联动画 - 轮播界面 - 滚动视图内边距 - 循环滚动 - 虚拟滚动
缺少浏览器功能、复杂的 JavaScript，并且需要支持输入模式（包括触摸、键盘和游戏手柄），这些都会使所有这些工作变得更加困难。
轻触互动的重要性
问题 3
51%
将触摸互动报告为
对其工作非常或极为重要
。
鉴于移动网络用户的访问统计数据仍在增长，半数受访者表示触及面对其网络工作非常重要，这一点就不足为奇了。这表明，CSS 滚动贴靠和 touch-action 等 Web 功能需要特别注意，才能提供高质量的轻触互动。
按 Tab 键或游戏手柄导航有困难
问题 5a
44%
报告执行游戏手柄和标签页导航方面的一定程度或极难
报告。
滚动包括键盘箭头、Tab 键、按空格键和游戏手柄等导航方法，在执行自定义滚动工作时可能很难包含这些方法。近一半的受访者表示，纳入这些输入有些或极难。
学习touch-action
问题 9
50%
通过调查问卷报告有关
`touch-action: manipulation`
的学习。
一些调查问卷问题询问了如何使用某些 API，答案可能是“是”“否”或“今天我学到了”。其中一条值得注意的反馈是，有多少用户表示通过调查问卷了解过 touch-action，因为在构建需要在滚动内互动的自定义触摸手势时，这是一个关键属性。
循环滚动
问题 27
58%
有时会报告每个项目
（使用循环滚动）。
再次从 0 开始。
对于 Web 平台仅提供很少或完全不支持的滚动功能而言，这些数字很高。因此，该功能经常会产生大量技术债务，它会注入复制或 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()。
特性
调查结果表明，用户在 Web 上难以使用某些特定类型的滚动相关组件，因为平台未提供构建这些组件所需的基本功能，无需使用插件或投入大量精力。 这是我们希望更深入地探索的领域。
开发者难以构建的功能包括： 1. 轮播界面 1. 虚拟滚动 1. 无限滚动
资源
缩略图：由 Taylor Wilcox 拍摄，照片来自 Unsplash 用户。