4 月，Chrome 团队根据 从 2019 年 MDN Web DNA 报告中报告的最常见问题发布了滚动和 touch-action 调查问卷。 2021 年滚动调查问卷 报告 已发布，Chrome 团队想分享一些从调查问卷结果中获得的见解和行动项 。我们希望这些结果能帮助浏览器供应商和标准组织了解如何改进网页滚动。
值得注意的结果
该调查问卷匿名收集了 880 份提交，其中 366 份回答了所有问题。
虽然只需一行 CSS（例如 overflow-x:
scroll;）即可开始使用滚动，但滚动 API 和选项的表面积很大，从 JavaScript 到
CSS 都有。以下结果有助于突出显示 Web 开发者遇到的问题。
对网页滚动的总体满意度
问题 27
45%
对网页滚动 的总体满意度 为不太满意 或非常不满意 。
此问题有意放在调查问卷的末尾，在有关 26 个滚动用例和功能的问题之后。从回答中可以看出，Web 社区在滚动方面存在困难。近一半的受访者表示总体不满意。
我们认为，对滚动操作的总体情绪不应如此低落。 此指标需要更改；它清楚地表明有工作要做。
使用滚动时遇到的困难
问题 2
43%
表示使用滚动时
不太困难
或非常困难。
根据我们的研究，这些困难源于滚动的用例众多。当我们谈论滚动时，可能包括：
缺少浏览器功能、复杂的 JavaScript 以及需要支持包括触摸、键盘和游戏手柄在内的输入模式，使得所有这些事情都变得更加困难。
触摸互动的重要性
问题 3
51%
表示触摸互动 对他们的工作
非常重要 或极其重要
。
随着移动网站用户在访问
统计数据中持续增加，
一半的受访者表示触摸对他们在网站上的工作非常
重要，这并不令人意外。这表明，CSS 滚动捕捉和
touch-action 等 Web 功能需要格外关注，以便 Web 能够提供高质量的触摸互动。
Tab 键或游戏手柄导航的难度
问题 5a
44%
表示游戏手柄 和 Tab 键导航
不太困难 或非常困难 。
滚动包括键盘箭头、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%
不太困难 或
非常困难。
三分之二的受访者在其 Web 工作中提供无限滚动，并且有相同比例的受访者表示很难做到这一点。这是高使用率与高难度相结合的另一个示例，这向我们表明需要关注的领域。
虽然 content-visibility 和
contain-intrinsic-size 可以结合使用，以降低长
可滚动区域的渲染费用，但它似乎无助于“加载更多”无限滚动
用户体验。
滚动链接动画或滚动触发动画
问题 24
47%
有时 使用，
每个项目 都会使用
56%
表示不太困难或
非常困难
近一半的受访者使用滚动编排的动画，一半的受访者认为这很困难，这再次将高使用率与困难联系起来。
与内置滚动竞争
问题 26
32%
总是或
大多数时候
50%
有时
手机和平板电脑应用的内置滚动和触摸互动通常被认为是 Web 可以赶上的明确领域。这些功能包括滚动链接动画、程序化界面、语音集成、滚动提示和下拉刷新 API。
只有一半的受访者认为，有时可以与内置滚动的体验相匹配。
对在 Web 上构建滚动互动的总体满意度
问题 27
调查问卷要点
调查问卷结果分为四个类别： 兼容性、 教育、 API、 和 功能。
兼容性
Chrome 团队已宣布一个目标，即减少 Web 兼容性问题，包括滚动兼容性。
首先要关注的三个兼容性问题：
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()。
功能
调查问卷结果表明，用户在使用 Web 上的一些特定类型的滚动相关组件时遇到困难，因为该平台没有提供构建这些组件所需的基元，而无需插件或付出大量精力。 我们希望更深入地探索这个领域。
开发者难以构建的功能包括： 1. 轮播广告 1. 虚拟滚动 1. 无限滚动