Custom Scrollbars

Die Custom Scrollbar-Funktion ermöglicht die vollständige Anpassung der nativen Browser-Scrollbars innerhalb definierter Container oder globaler Layoutbereiche. Dabei werden keine externen UI-Komponenten verwendet, sondern die vorhandene Scroll-Mechanik des Browsers erweitert und visuell überlagert. Die Konfiguration erlaubt die Steuerung von Größe, Position und Farbschema der Scrollbars, sodass sie sich nahtlos in das Designsystem der Anwendung integrieren lassen. Durch die direkte Anbindung an DOM-Elemente können sowohl einzelne Scrollbereiche als auch globale Layout-Container flexibel angepasst werden, ohne die native Scroll-Logik zu beeinträchtigen.

Initialisierung

document.addEventListener('kryzo:ready', ({ detail: { CUSTOM } }) => {
    /* Ab hier stellen alle Custom Element Funktionen zur Verfügung */
});

Verwendung

// Element, welches die Scrollbar erhalten sollen
const myScrollArea = document.querySelector('body');

// Scrollbars aktivieren
CUSTOM.scrollBars(myScrollArea,{
    width:   10,            // Breite der Scrollbar
    height:  10,            // Horizontal Scrollen - Höhe der Scrollbar
    offsetX: 6,             // Abstand X-Achse zum Browserrand
    offsetY: 6,             // Abstand Y-Achse zum Browserrand
    zIndex:  1,             // zIndex überschreiben, wenn nicht gesetzt
                            // zIndex = zIndex vom Element + 1
    colors: {
        track: '#00000000',    // Farbe Track Scrollbar, CSS Variable oder Farbangabe
        thumb: '#99999966',    // Farbe Thumb Scrollbar, CSS Variable oder Farbangabe
    }
});