scroll (_base.scscs)

Tipo: Mixin

Versión: 2.x.x

Personaliza el scroll del elemento mediante una sintaxis basada en map, con soporte para color, grosor, radios, bordes, sombras y ocultación visual de la barra.

Usa axis como mecanismo único para definir el eje con x, y o both. Para Firefox, el mixin aplica scrollbar-color y scrollbar-width, cuyo grosor solo admite auto, thin o none mediante firefox_width.

Nota: La personalización no se comporta igual en todos los navegadores. En Firefox no es posible definir el ancho del scroll en píxeles y el soporte queda limitado a scrollbar-color y scrollbar-width. Además, la familia ::-webkit-scrollbar es no estándar, por lo que Safari y navegadores basados en Chromium pueden mostrar diferencias de renderizado según la plataforma o la versión.

Interface 

@mixin scroll($attr: ());

Sintaxis map

Clave Tipo Default Descripción
thumb_color | color | c Color white Define el color del thumb.
thumb_hover_color | color_hover | ch Color color Define el color del thumb al pasar el cursor.
thumb_active_color | color_active | ca Color color_hover Define el color del thumb durante la interacción activa.
background | bg | b Color black Define el color base del scrollbar y funciona como respaldo del track.
track_color | bg_track | bt Color bg Define el color específico del track.
track_hover_color | bg_track_hover | bth Color bg_track Define el color del track al pasar el cursor.
track_active_color | bg_track_active | bta Color bg_track_hover Define el color del track durante la interacción activa.
size | width | w Size 15px Define el grosor base del scrollbar cuando no se especifica un eje concreto.
size_x | width_x | wx Size width Controla la altura visual del scrollbar horizontal.
size_y | width_y | wy Size width Controla el ancho visual del scrollbar vertical.
radius | r Size 10px Aplica el radio del thumb y funciona como respaldo del track.
radius_track | rt Size radius Define el radio específico del track.
thumb_border | tb Border 0 solid transparent Define el borde del thumb.
track_border | trb Border 0 solid transparent Define el borde del track.
thumb_shadow | ts Shadow none Define la sombra del thumb.
track_shadow | trs Shadow none Define la sombra del track.
firefox_width | fw Keyword auto Define scrollbar-width para Firefox. Admite auto, thin o none.
axis Keyword y Define el eje del scroll con x, y o both.
hidden | hide | h Boolean false Oculta visualmente la barra sin desactivar el scroll.

Ejemplo

cat

Scroll Y

cat

Scroll X

cat

Scroll Both

cat

Scroll Hidden


            


            

                

            


            

                
<div class="group">
                    <div class="scroll_y">
                        <img src="img/test/1.webp" alt="cat" class="cat">
                    </div>
                    <p class="label">Scroll Y</p>
                </div>

                <div class="group">
                    <div class="scroll_x">
                        <img src="img/test/1.webp" alt="cat" class="cat">
                    </div>
                    <p class="label">Scroll X</p>
                </div>

                <div class="group">
                    <div class="scroll_both">
                        <img src="img/test/1.webp" alt="cat" class="cat">
                    </div>
                    <p class="label">Scroll Both</p>
                </div>

                <div class="group">
                    <div class="scroll_hidden">
                        <img src="img/test/1.webp" alt="cat" class="cat">
                    </div>
                    <p class="label">Scroll Hidden</p>
                </div>