scroll-snap-type有滚动容器下吸附至吸附点的严格程度:https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-type
此属性不为吸附点指定任何确切的动画或运行规律,留待用户代理处理。
//不吸附
scroll-snap-type:none;
//表示吸附轴的关键字
scroll-snap-type:x;
scroll-snap-type:y;
scroll-snap-type:block;
scroll-snap-type:inline;
scroll-snap-type:both;
//表示吸附程度的可选关键字
//mandatory或proximity
scroll-snap-type:x mandatory;
scroll-snap-type:y proximity;
scroll-snap-type:both mandatory;
//全局值
scroll-snap-type:inherit;
scroll-snap-type:initial;
scroll-snap-type:revert;
scroll-snap-type:revert-layer;
scroll-snap-type:unset;
none
:在滚动此滚动容器的可见视口时,必须忽略吸附点
x
:滚动容器仅在其横轴上吸附至吸附位置
y
:滚动容器仅在其纵轴上吸附至吸附位置
block
:滚动容器仅在其块向轴上吸附至吸附位置
inline
:滚动容器仅在其行向轴上吸附至吸附位置
both
:滚动容器在其两轴上独立的吸附至吸附位置(可能在各轴上吸附至不同的元素)
mandatory
:若滚动容器当前未在滚动,则其可见视口必须吸附至吸附位置
proximity
:若滚动容器当前未在滚动,则其可见视口可以吸附至吸附位置,是否吸附由用户代理根据滚动参数决定,若指定了吸附轴,则此为默认的吸附程度。
备注:若吸附口中的内容发生变动(如被添加,移动,删除或改变尺寸)或者与滚动吸附相关的任意属性(如scroll-snap-type或scroll-margin)的值发生变化,则滚动容器将按照scroll-snap-type最新的值重新吸附。
参考链接:
https://segmentfault.com/a/1190000038459089#item-10