@casoon/dragonfly/effects/motion/scroll.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Scroll-Effekte
 * 
 * Diese Datei enthält verschiedene Scroll-Effekte für moderne UIs.
 * Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
 */

@layer utilities {
    .scroll-smooth {
        scroll-behavior: smooth;
    }

    .scroll-snap-x {
        scroll-snap-type: x mandatory;
    }

    .scroll-snap-y {
        scroll-snap-type: y mandatory;
    }

    .scroll-snap-start {
        scroll-snap-align: start;
    }

    .scroll-snap-center {
        scroll-snap-align: center;
    }

    .scroll-snap-end {
        scroll-snap-align: end;
    }

    .scroll-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .scroll-hide::-webkit-scrollbar {
        display: none;
    }

    .scroll-thin {
        scrollbar-width: thin;
    }

    .scroll-thin::-webkit-scrollbar {
        height: var(--spacing-1-5);
        width: var(--spacing-1-5);
    }

    .scroll-thin::-webkit-scrollbar-track {
        background: var(--scroll-track-color, transparent);
    }

    .scroll-thin::-webkit-scrollbar-thumb {
        background: var(--scroll-thumb-color, rgb(0 0 0 / 20%));
        border-radius: var(--spacing-1);
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer utilities {
        .scroll-smooth {
            scroll-behavior: auto;
        }
    }
}