Прокрутка с привязкой к точкам

Утилиты

Класс	Свойства	Описание
`snap`	scroll-snap-type: var(--scroll-snap-axis, both) var(--scroll-snap-strictness, mandatory)	основной класс привязки
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-start`	scroll-snap-align: start
`snap-end`	scroll-snap-align: end
`snap-center`	scroll-snap-align: center
Stop
`snap-normal`	scroll-snap-stop: normal
`snap-always`	scroll-snap-stop: always
Margin
`snap-m${direction}-${value}`	scroll-snap-margin`${direction}`: `${value}`	то же Утилиты полей
Padding
`snap-p${direction}-${value}`	scroll-snap-padding`${direction}`: `${value}`	то же Утилиты отступов
Other
`scrollbar-hide`	scrollbar-width: none ::-webkit-scrollbar: { display: none }	визуально скрыть полосу прокрутки

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