作者：@Zachary Lee
原文：https://webdeveloper.beehiiv.com/p/css-interaction-properties-you-might-not-know-about
背景
在现代网页设计中，用户体验的流畅性和互动性越来越受到重视。CSS 提供了多种属性来增强网页的交互效果，特别是在滚动和触摸操作方面。本文介绍了几个关键的 CSS 属性，包括 scroll-snap、overscroll-behavior、scrollbar-gutter、overflow-anchor、touch-action、scroll-timeline、view-timeline 和 View Transition API，这些属性可以帮助开发者创建更加直观和动态的网页体验。
要点
本文的核心要点是介绍了一系列新的 CSS 属性和 API，这些工具可以显著提升网页的交互性和用户体验。通过这些属性，开发者可以更精细地控制滚动行为、触摸操作、动画效果以及页面过渡，从而为用户提供更加流畅和自然的浏览体验。
分析
Scroll Snap
这个属性允许网页内容在用户滚动时 “吸附” 到特定位置，特别适用于轮播图或需要对齐的页面部分。
通过 scroll-snap-type 和 scroll-snap-align 属性，开发者可以定义滚动容器的行为和子元素的对齐方式。
scroll-snap-type：此属性设置容器的滚动吸附行为。它接受 x、y 或 block 等值，以及 mandatory 或 proximity，用于确定吸附轴以及容器遵守吸附点的严格程度。scroll-snap-align：应用于子元素，此属性定义它们在可滚动区域内的对齐方式。常见值包括 start、center 和 end，用于确定吸附时的对齐方式。
.container {
scroll-snap-type: y mandatory;
}
.item {
scroll-snap-align: center;
}在此范例中，容器沿垂直轴 (y) 将其项目吸附到中心。当使用者滚动时，内容会自动对齐到最近的吸附点。scroll-snap-type: y mandatory; 和 scroll-snap-align: center; 可以确保内容在垂直滚动时自动对齐到中心。
Overscroll Behavior
这个属性控制滚动元素在到达边界时的行为，可以防止默认的浏览器动作（如反弹效果或页面滚动）。
通过 overscroll-behavior 属性，开发者可以设置 auto、contain 或 none，以控制滚动溢出的传播。
.modal {
overflow-y: auto;
overscroll-behavior-y: contain;
}在此范例中，当使用者到达模态窗口的滚动边界时，overscroll-behavior: contain 会阻止滚动影响模态窗口外的页面。这对于控制模态窗口或侧边栏中的滚动行为特别有用。
要防止 Android 上的 Chrome 在滚动超过顶部时刷新页面，请在 html 元素上设置以下内容：
html {
margin: 0;
overscroll-behavior: none;
}Scrollbar Gutter
这个属性允许开发者为滚动条预留空间，避免内容溢出时导致的布局变化。
通过 scrollbar-gutter 属性，可以设置 auto、stable、always 等值，确保滚动条出现时不会影响页面的视觉布局。
Overflow Anchor
这个属性控制滚动锚定行为，防止动态内容加载时导致的滚动跳跃。
通过 overflow-anchor 属性，开发者可以设置 auto 或 none，以控制浏览器是否调整滚动位置。例如，overflow-anchor: none; 可以防止聊天应用中新消息加载时改变用户的滚动位置。
Touch Action
这个属性控制触摸设备上的手势行为，决定浏览器是否处理默认手势（如缩放和滚动），或者将事件传递给 JavaScript 进行自定义处理。通过 touch-action 属性，开发者可以设置 auto、none、pan-x、pan-y 等值，以控制元素的触摸行为。例如，touch-action: pan-y; 可以确保垂直滚动元素时不会触发水平滚动。
Scroll Timeline 和 View Timeline
这两个新属性允许开发者根据用户的滚动行为创建动态动画。scroll-timeline 将动画与页面或元素的滚动关联，而 view-timeline 则根据元素在视口中的位置创建动画。这些属性可以替代 JavaScript 库，提供更好的性能。
View Transition API
这个 API 提供了一种创建平滑视图过渡动画的方法，适用于单页应用（SPA）和多页应用（MPA）。通过 document.startViewTransition(callback)，开发者可以在 DOM 状态变化时捕捉当前屏幕截图，并在更新后平滑过渡到新状态。
【第3175期】用 View Transition API 在 Web 做出 Native 般丝滑的动画
影响
这些新的 CSS 属性和 API 对网页设计和开发产生了深远的影响。它们不仅提升了用户体验，还简化了开发流程，减少了对外部库的依赖。特别是 scroll-snap 和 overscroll-behavior 等属性，使得滚动体验更加流畅和直观；而 scroll-timeline 和 view-timeline 则开启了基于用户交互的动态动画的新时代。
结论
随着这些新的 CSS 属性和 API 的普及，网页设计和开发将迎来更多的创新和可能性。开发者可以利用这些工具创建更加动态和互动的网页，提升用户体验。未来，随着浏览器支持的增强和开发者社区的探索，这些技术将在更多的项目中得到应用，推动网页设计的发展。
AI 阅：了解技术资讯的一种方式。
