【早阅】可能不知道的CSS交互属性

作者：@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 元素上设置以下内容：