灵感来源于 tailwindcss-scroll-snap
Class | 属性 | 描述 |
---|---|---|
snap-start | scroll-snap-align: start | |
snap-end | scroll-snap-align: end | |
snap-center | scroll-snap-align: center |
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 |
export default {
plugins: [
require('windicss/plugin/scroll-snap'),
// ...
],
}
使用 TypeScript:
import scrollSnapPlugin from 'windicss/plugin/scroll-snap'
export default defineConfig({
plugins: [
scrollSnapPlugin,
// ...
],
})