Scroll

Scroll Snap Align

Can I use ?Can I use ?
classproperties
scroll-snap-align:value / scroll-snap:valuescroll-snap-align: value
scroll-snap-align:value|value / scroll-snap:value|valuescroll-snap-align: value value
scroll-snap:centerscroll-snap-align: center
scroll-snap:endscroll-snap-align: end
scroll-snap:startscroll-snap-align: start
scroll-snap-align:nonescroll-snap-align: none

Overview

The scroll-snap-align CSS property specifies the box’s snap position as an alignment of its snap area (as the alignment subject) within its snap container’s snapport (as the alignment container). The two values specify the snapping alignment in the block axis and inline axis, respectively. If only one value is specified, the second value defaults to the same value.

Beautify Scrollbar

Extend style or copy classes for beautifying scrollbar to your elements.

import { Style } from '@master/css';

Style.extend('classes', {
    'scrollbar': '
        {w:5;h:5;rounded}::scrollbar
        bg:fade-90::scrollbar
        bg:gray-22::scrollbar@dark
        bg:transparent::scrollbar-corner
        bg:fade-88::scrollbar-thumb
        bg:fade-78::scrollbar-thumb:hover
        bg:fade-66::scrollbar-thumb:active
        bg:gray-30::scrollbar-thumb@dark
        bg:gray-60::scrollbar-thumb:hover@dark
        bg:gray-60::scrollbar-thumb:active@dark
        rounded::scrollbar-thumb
    '
})

Applying with functions

<div class="scroll-snap-align:$(value)">...</div>

Master supports native CSS variables and functions, just add var(--key) or use shorthand$(key) for variables.

You can also use calc(expression), env(expression) and other CSS functions if the property supports it.

To learn more, see the Functions documentation.

Conditionally apply

States and selectors

<div class="scroll-snap-align:center:hover">...</div>

Master supports all native CSS selectors, just add :hover, :disabled, chaining, combinators and other CSS selectors as usual.

To learn more, see the Selectors documentation.

Responsive breakpoints

<div class="scroll-snap-align:center@sm">...</div>

Responsive breakpoints can be applied to all styles. Some available breakpoints are 3xs, 2xs, xs, sm,md, lg, xl, 2xl, 3xl, 4xl. Arbitrary breakpoints can be specified through comparison operators >, >=, <, <=.

To learn more, see the Breakpoints documentation.

<div class="scroll-snap-align:center@print">...</div>

Master supports media types like print, screen, speech, all, and other media queries.

To learn more, see the Media Queries documentation.

Dark mode and color schemes

<div class="scroll-snap-align:center@dark">...</div>

Master uses the selector html.dark to support color schemes. Now, you can easily fine-tune your style for the color schemes.

To learn more, see the Color Schemes documentation.



© Aoyue Design LLC.
關於此頁的問題
編輯自AronLola