Scroll Snap

灵感来源于 tailwindcss-scroll-snap

Scroll Snap Align

Class属性描述
snap-startscroll-snap-align: start
snap-endscroll-snap-align: end
snap-centerscroll-snap-align: center

Scroll Snap Stop

Class属性描述
snap-normalscroll-snap-stop: normal
snap-alwaysscroll-snap-stop: always

Scroll Snap Type

Class属性描述
snapscroll-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

Margin, Padding and Other

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-hidescrollbar-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,
    // ...
  ],
})