Scroll Snap

inspired by tailwindcss-scroll-snap

Utilities

ClassPropertiesDescription
snapscroll-snap-type:
var(--scroll-snap-axis, both)
var(--scroll-snap-strictness, mandatory)
main snap class
Strictness
snap-none--scroll-snap-strictness: none
snap-mandatory--scroll-snap-strictness: mandatory
snap-proximity--scroll-snap-strictness: proximity
Axis
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
Align
snap-startscroll-snap-align: start
snap-endscroll-snap-align: end
snap-centerscroll-snap-align: center
Stop
snap-normalscroll-snap-stop: normal
snap-alwaysscroll-snap-stop: always
Margin
snap-m${direction}-${value}scroll-snap-margin${direction}: ${value}same Margin Utilities
Padding
snap-p${direction}-${value}scroll-snap-padding${direction}: ${value}same Padding Utilities
Other
scrollbar-hidescrollbar-width: none
::-webkit-scrollbar: {
  display: none
}
visual hide scrollbar

Usage

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

with TypeScript:

// windi.config.ts
import scrollSnapPlugin from 'windicss/plugin/scroll-snap'

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