获取 2021 年 Scroll 调查报告，并了解 Chrome 团队关于此报告如何影响 Chromium 和网络优先事项和计划的说明。
今年 4 月，Chrome 团队根据 2019 年 MDN Web DNA 报告中报告的最常见问题发布了一项滚动和触控操作调查。2021 年滚动调查报告已发布，Chrome 团队希望分享我们从调查结果中获得的一些想法和行动项。我们希望这些结果能帮助浏览器供应商和标准组织了解如何改进网页滚动。
查看 2021 年滚动调查报告。
值得注意的结果
该调查匿名收集了 880 份提交内容，其中 366 份回答了所有问题。
虽然只需一行 CSS（例如 overflow-x:
scroll;）即可开始使用滚动，但滚动 API 和选项的覆盖面很广，从 JavaScript 到 CSS 都有。以下结果有助于突出显示 Web 开发者遇到的问题。
对网页滚动功能的总体满意度
问题 27
45%
对网页滚动的总体满意度不太高或非常低。
此问题有意放在调查问卷的末尾附近，在有关 26 个滚动使用情形和功能的问题之后。从回答中可以看出，Web 社区在滚动方面遇到了困难。近一半的受访者表示总体不满意。
我们认为，用户对使用滚动功能的总体评价不应如此之低。此指标需要更改；这明确表明需要开展工作。
难以使用滚动功能
问题 2
43%
报告称，使用滚动功能有些或
非常困难
。
根据我们的研究，这些困难源于滚动浏览的多种应用场景。当我们谈论滚动时，可能包括： - 在可滚动区域内定位元素 - 无限滚动 - 与滚动关联的动画 - 轮播界面 - ScrollView 内边距 - 循环滚动 - 虚拟化滚动
缺少浏览器功能、复杂的 JavaScript 以及需要支持触控、键盘和游戏手柄等输入模式，使得所有这些事情都变得更加困难。
触摸互动的重要性
问题 3
51%
报告 触控互动 对其工作非常或极其重要。
移动网站用户在访问统计信息中仍呈上升趋势，因此，一半的受访者表示触控对他们通过网络开展工作非常重要，这一点并不令人意外。这表明，CSS 滚动捕捉和 touch-action 等 Web 功能需要特别注意，以便 Web 能够提供高质量的触控互动。
使用 Tab 键或游戏手柄导航的难度
问题 5a
44%
报告有点或非常难以实现游戏手柄和标签页导航。
滚动包括键盘箭头、Tab 键、空格键按压和游戏手柄等导航方法，在进行自定义滚动工作时，很难包含这些方法。近一半的受访者表示，他们很难或非常难将这些输入内容纳入考虑范围。
学习 touch-action
问题 9
50%
报告中学习了调查问卷中的
`touch-action: manipulation`
。
部分调查问题询问了有关使用某些 API 的情况，可能的答案包括“是”“否”或“今天我学到了”。有一条值得注意的反馈是，许多人在调查中表示，他们是通过调查了解 touch-action 的，因为在构建需要在滚动范围内互动的自定义触控手势时，这是一个关键属性。
循环滚动
问题 27
58%
报告有时、经常或每个项目
使用循环滚动。
在 60 秒后，秒数会从 0 重新开始。
对于几乎或完全不受 Web 平台支持的滚动功能，这些数字非常高。 因此，该功能通常会产生大量技术债务，并注入重复代码或 JavaScript 来强制实现效果。它常用于产品轮播界面，以及在选择以秒或分钟为单位的时间时提供循环滚动。
可滚动区域是否重要
问题 2
55%
非常或
极其重要
16%
报告完全不重要
或有点重要
受访者强烈认为可滚动区域非常重要，这进一步表明了实现高质量滚动效果的难度。
轮播广告
问题 20
87%
使用过轮播界面。
24%
报告称，这些设备
易于管理。
几乎所有受访者都在其 Web 作品中使用轮播界面，但只有 25% 的受访者认为轮播界面易于管理。在我们的研究中，现成的轮播界面很受欢迎，但这个统计数据让我们感到惊讶，因为它听起来并不像是一个已解决的问题。
无限滚动
问题 22
65%
有时使用它
每个项目
60%
比较困难或
极其困难。
三分之二的受访者在网页工作中采用无限滚动，但也有相同比例的受访者表示很难做到这一点。这是高使用率与高难度相结合的另一个示例，表明这是一个需要关注的领域。
虽然 content-visibility 和 contain-intrinsic-size 可以结合使用来降低长滚动区域的渲染费用，但似乎无法帮助实现“加载更多”无限滚动用户体验。
与滚动关联或由滚动触发的动画
问题 24
47%
有时
用于每个项目
56%
报告有点难或
非常难
近一半的受访者使用滚动编排动画，一半的受访者认为这种动画难以使用，这再次表明高使用率与难度之间存在关联。
通过内置滚动功能竞争
问题 26
32%
始终或
大多数时候
50%
有时
手机和平板电脑应用的内置滚动和触控互动功能通常被认为是 Web 可以赶超的明确领域。这些功能包括与滚动相关的动画、程序化界面、语音集成、滚动提示和下拉刷新 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 网站。