CSS | 滚动行为属性

概述

CSS滚动行为属性可以控制在滚动元素时的滚动速度和滚动方向等效果。这些特性通过使用 scroll-behavior 和 scroll-snap-type 等属性来实现。这些属性可以为我们网站的用户提供视觉上更吸引人的交互体验。

scroll-behavior

scroll-behavior 属性用于定义在滚动时，浏览器应该如何处理滚动行为。它有两个可能的值：auto 和 smooth。

• auto: 默认值。当使用滚动条或 JavaScript 滚动时，则是浏览器的正常行为。完全基于用户输入来滚动。
• smooth: 确定浏览器滚动应该有动画效果，应该有平滑且缓慢的滚动。

.container {
  scroll-behavior: smooth;
}

scroll-snap-type

scroll-snap-type 属性允许您控制单个容器内吸附到滚动端的元素的滚动行为。它有三个可能的值：none，mandatory 和 proximity。

• none: 默认值。没有吸附效果，滚动会滚到任意位置。
• mandatory: 当滚动时，元素会始终吸附到滚动端。本属性允许在垂直和水平方向上分别定义滚动锚点。
• proximity: 当滚动到结尾时，容器中最接近右边和下面的元素吸附到滚动端。这与 mandatory 类似，但是浏览器必须以某种方式进行比较，并在向下滚动时更靠近顶部的元素比向上滚动时更靠近底部的元素优先。

/* 声明水平和垂直的滚动锚点将始终吸附到滚动边缘 */
.container {
  scroll-snap-type: x mandatory;
  scroll-snap-type: y mandatory;
}

/* 滚动结束后，最接近滚动边缘的元素将始终吸附到该边缘 */
.container {
  scroll-snap-type: x proximity;
  scroll-snap-type: y proximity;
}

scroll-snap-align

scroll-snap-align 属性是在 scroll-snap-type 设置为 mandatory 或 proximity 的情况下使用的属性，定义吸附元素滚动结束时相对于吸附端对齐的位置。这个属性有五个可能的值：none，start，end，center 和 nearest。

• none: 默认值。元素不会与滚动端对齐。
• start: 元素的起点将与滚动端的起点对齐。
• end: 元素的结尾将与滚动端的结尾对齐。
• center: 元素的中心将与滚动端的中心对齐。
• nearest: 元素将根据它到滚动端的距离维护近端或远端的位置

/* 当滚动停止时，元素始终与水平滚动锚点的起点对齐 */
.container {
  scroll-snap-type: x mandatory;
  scroll-snap-align: start;
}

/* 当滚动停止时，元素应始终竖直滚动锚点对齐 */
.container {
  scroll-snap-type: y proximity;
  scroll-snap-align: center;
}

结论

CSS滚动行为属性可以为我们的网站增加视觉效果。使用 scroll-behavior 属性可为用户提供平滑的滚动体验，使用 scroll-snap-type 和 scroll-snap-align 属性可使页面元素在滚动时具有吸附效果。这些属性是相对较新的功能，具有局限性，但可以使用它们改善用户体验。