记录css滚动吸附效果

CSS 滚动吸附的关键属性
在定义滚动吸附前，需要在滚动容器上启用滚动。通过确保滚动容器指定了尺寸且启用 overflow 可启用滚动。
然后可以在滚动容器上使用下列关键属性定义滚动吸附：

• 可滚动容器属性：

  • scroll-snap-type——使用这个属性可定义滚动式视口是否可被吸附、必须还是可选吸附以及吸附应当出现在哪些轴上。
    兼容性Chrome >=69
  • scroll-padding——这个属性可以设置在滚动容器上，用于创建吸附偏移。
    兼容性Chrome >=69

• 可滚动容器子元素属性：

  • scroll-snap-align——这个属性设置在滚动容器的每个子元素上，可用于定义每个子元素的吸附位置或没有吸附位置。
    兼容性Chrome >=69
  • scroll-snap-stop——这个属性确保在滚动中吸附到而不是越过某个子元素。
    兼容性Chrome >=75
  • scroll-margin——这个属性可以设置在在滚动中可以被吸附的子元素上，用于在指定盒子上创建吸附外边距。
    兼容性Chrome >=69