【干货】使用 CSS Scroll Snap 优化滚动，提升用户体验！

/* 设置滚动容器 */
.scroll-container {
  overflow: auto;
  scroll-snap-type: y mandatory; /* 启用垂直滚动切换，并且每一个子元素都必须对齐 */
  scroll-padding-top: 50px; /* 在滚动容器顶部添加额外的空间 */
}
 
/* 设置滚动子元素 */
.scroll-item {
  scroll-snap-align: start; /* 每个子元素在滚动时对齐其顶部到其父容器的顶部 */
  height: 100vh; /* 每个子元素的高度等于视口高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20vw; /* 使用视口宽度的20倍来调整文本大小，保持良好的缩放效果 */
}
 
/* 示例代码中的第一个子元素 */
.scroll-item:nth-child(1) {
  background: #f6a5c0; /* 设置第一个子元素的背景颜色 */
}
 
/* 示例代码中的第二个子元素 */
.scroll-item:nth-child(2) {
  background: #f8bd88; /* 设置第二个子元素的背景颜色 */
}
 
/* 示例代码中的第三个子元素 */
.scroll-item:nth-child(3) {
  background: #c7ecee; /* 设置第三个子元素的背景颜色 */
}

这段代码为一个包含三个子元素的滚动容器设置了CSS Scroll Snap。每个子元素在垂直滚动时都会对齐到其父容器的顶部，并且在滚动容器顶部有额外的空间。同时，每个子元素的高度被设置为视口的高度，确保了即使在移动设备上也能提供良好的用户体验。最后，通过flex布局的font-size属性使得文本大小适应不同屏幕尺寸，保持良好的缩放效果。