Scroll Snap

Scroll Snap Align

Class	属性	描述
`snap-normal`	scroll-snap-stop: normal
`snap-always`	scroll-snap-stop: always

Class	属性	描述
`snap`	scroll-snap-type: var(--scroll-snap-axis, both) var(--scroll-snap-strictness, mandatory)	main snap class
严格性
`snap-none`	--scroll-snap-strictness: none
`snap-mandatory`	--scroll-snap-strictness: mandatory
`snap-proximity`	--scroll-snap-strictness: proximity
坐标轴
`snap-x`	--scroll-snap-axis: x
`snap-y`	--scroll-snap-axis: y
`snap-block`	--scroll-snap-axis: block
`snap-inline`	--scroll-snap-axis: inline
`snap-both`	--scroll-snap-axis: both

Class	属性	描述
外边距
`snap-m${direction}-${value}`	scroll-snap-margin`${direction}`: `${value}`	same Margin Utilities
内边距
`snap-p${direction}-${value}`	scroll-snap-padding`${direction}`: `${value}`	same Padding Utilities
其它
`scrollbar-hide`	scrollbar-width: none ::-webkit-scrollbar: { display: none }	visual hide scrollbar

windi.config.js

export default {
  plugins: [
    require('windicss/plugin/scroll-snap'),
    // ...
  ],
}

使用 TypeScript:

windi.config.ts

import scrollSnapPlugin from 'windicss/plugin/scroll-snap'

export default defineConfig({
  plugins: [
    scrollSnapPlugin,
    // ...
  ],
})