场域手记
NEXTFIELD / FIELD NOTESI — 前端
CHAPTER 01 / WRITINGFIELD NOTE 02

把滚动当作输入来设计

滚轮、触摸和键盘都可能表达滚动意图。页面接管之前,要判断当前焦点、手势边界与用户是否需要保留浏览器原生行为。

前端2026-10-172 分钟阅读

向下阅读

全屏页面常把滚轮映射成“切到下一屏”。实现只需要监听一个事件,但访客并没有只提供一种输入:触控板可以连续微滚,鼠标滚轮可能一次跨过多格,触屏有自己的惯性,键盘还会用空格和方向键移动页面。

把滚动当作输入,首先要问它在当前上下文里代表什么。访客如果正在输入文本,按空格可能是打字;焦点在可滚动的曲目列表里,滚轮应该先移动列表;只有页面确实承担整屏切换时,才需要将明确的纵向手势解释为换屏。

不要把每个滚轮事件都当成一步

一次手势通常会连续产生许多 wheel 事件。每收到一个就切屏,会让页面连续飞过几个章节。可以用方向阈值过滤轻微噪声,再用短暂锁定保证同一段手势只推进一屏。解锁时间要与切屏时间相配,也要允许访客在动画结束后立刻继续操作。

触控板的事件幅度通常更小、更连续,鼠标滚轮却可能一下很大。阈值不必追求识别设备,而应避免过轻的移动误触,同时让清楚的手势仍然灵敏。触屏最好单独计算起点和终点,只在距离达到合理范围时才切换,避免点击或短小拖动被误认为翻屏。

让焦点先说明当前任务

在 input、textarea、可编辑区域或有自己滚动条的容器中,全局滚动逻辑应该让出控制权。检查事件目标与焦点,比在整个页面上无条件阻止默认行为更可靠。否则,看似方便的全屏导航会让表单、目录和歌词列表变得难以使用。

键盘操作也要明确。方向键和 PageDown 可以切换章节,但空格只有在没有聚焦按钮、输入框等控件时才适合承担页面导航。链接和按钮仍应保留自己的回车与空格行为。减少动态效果的偏好则应该让内容回到正常文档滚动,或至少去掉非必要的位移和模糊。

手势也需要一条返回路径

切换之后,地址、焦点和当前章节应保持可理解。使用片段标识可以让某一屏被链接和刷新恢复;焦点不能留在已经隐藏的按钮上;滚动切换也不应该让访客失去浏览器返回的预期。

全屏导航的价值是建立节奏,不是夺走浏览器的控制权。只有当手势意图足够明确、当前控件没有自己的任务,而且下一步可预测时,接管滚动才会像帮助。否则,让浏览器按它熟悉的方式滚动,往往更符合访客的直觉。