Barras Scroll mas anchas en containers

#1 · November 17, 2023, 3:26 am

es una aplicacion que corre en una pantalla tactil al cargar muchos registros en un container a traves de NeoTable, la barra de desplazamiento se hace cada vez mas fina y se dificulta para manejarla con el dedo.

Probe con la opcion "neoScrollBars" sin funcionar , o por lo menos no veo cambios visibles en la barra de desplazamiento

Existe alguna manera de cambiar el grosor de la misma ?

#2 · November 17, 2023, 8:40 am

@gustavo1073 no entiendo muy bien la razón por la que cambia el grosor de las barras de desplazamiento en tu aplicación. En todo caso puedes probar con este CSS que puedes configurar a tu gusto:

/* Para WebKit (Chrome, Safari) y navegadores basados en Blink */
::-webkit-scrollbar {
  width: 12px; /* Ancho de la barra de desplazamiento */
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Color del fondo del track */
}

::-webkit-scrollbar-thumb {
  background-color: #888; /* Color del thumb (indicador móvil) */
  border-radius: 6px; /* Borde redondeado del thumb */
}

/* Para Firefox (y otros navegadores) */
* {
  scrollbar-width: thin; /* Ancho de la barra de desplazamiento en Firefox */
}

*::-moz-scrollbar-thumb {
  background-color: #888; /* Color del thumb en Firefox */
  border-radius: 6px; /* Borde redondeado del thumb en Firefox */
}

#3 · November 27, 2023, 9:09 pm

@luishp Gracias , de maravillas

#4 · January 5, 2024, 11:40 pm

@luishp

Te hago una consulta referente a esto, se pueden aplicar estos ajustes CSS pero solo a algunos containers?

Aplicando tu ejemplo se aplica a todos los containers de la aplicacion

#5 · January 6, 2024, 1:00 pm

@gustavo1973, si se puede hacer utilizando un selector de CSS diferente, como por ejemplo una clase.
En este ejemplo, se aplicará a todos los Containers que tengan asignada la clase CSS custom-scrollbar (Panel Properties > Advanced > css-class)

/* Para WebKit (Chrome, Safari) y navegadores basados en Blink */
.custom-scrollbar::-webkit-scrollbar {
  width: 12px; /* Ancho de la barra de desplazamiento */
}
.custom-scrollbar::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Color del fondo del track */
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #888; /* Color del thumb (indicador móvil) */
  border-radius: 6px; /* Borde redondeado del thumb */
}

/* Para Firefox (y otros navegadores) */
.custom-scrollbar {
  scrollbar-width: thin; /* Ancho de la barra de desplazamiento en Firefox */
}
.custom-scrollbar::-moz-scrollbar-thumb {
  background-color: #888; /* Color del thumb en Firefox */
  border-radius: 6px; /* Borde redondeado del thumb en Firefox */
}

Barras Scroll mas anchas en containers - Forum

Barras Scroll mas anchas en containers