Ver originales (Francés)

Barra de desplazamiento doble

Resuelto
zacreur -  
 zacreur -
Hola,

Antes que nada, estoy en autoformación sobre HTML y CSS desde hace un mes y medio.

Estoy con un problema molesto, todo está en el título, tengo una doble barra de desplazamiento.

Quise personalizar una, así que me encontré con la barra de desplazamiento predeterminada más la que hice, pero aún no logro eliminar la predeterminada.

He intentado todas las cosas como

overflow: hidden
overflow-y: hidden

Pero el problema es que me elimina ambas barras de desplazamiento. Para ser más preciso, me elimina la barra de desplazamiento predeterminada, mi barra de desplazamiento creada está ahí pero es inutilizable, al igual que el desplazamiento hacia abajo.

Gracias de antemano a cualquiera que me encuentre una solución, porque he pasado horas en esto y ya estoy agotado de ideas. He publicado la foto en Openclassroom si hay interés.
https://openclassrooms.com/forum/sujet/double-scrollbar

¡Que tengas un buen día!

2 respuestas

  1. Behemoth
     
    Hola,
    sin ver su código (completo) es difícil decir algo...
    ¿Cómo está hecha la barra de desplazamiento personalizada, por ejemplo?
    El código que muestras (usa las etiquetas de código del foro la próxima vez, será más claro) es incorrecto, así que es normal que no funcione:
    Las propiedades CSS se escriben en la forma
    nombre-de-la-propiedad dos-puntos valor punto-y-coma
    Así que: 
    overflow: hidden; overflow-y: hidden; /*que de hecho no sirve de nada aquí, ya que overflow agrupa overflow-x y overflow-y*/


    no puede funcionar de otro modo.

    El ejemplo más común de barra personalizada se basa en reglas específicas para diferentes navegadores y un poco de JavaScript (más específicamente JQuery). Dado que estas reglas no están normalizadas, es necesario indicar las específicas para cada navegador (si existen), como el prefijo para webkit en Chrome y Safari:
    artículo completo que presenta plugins (pero es bastante antiguo, así que hay mejores opciones ahora)
    https://www.ipgirl.com/4252/barre-de-defilement-personnalisee-en-css.html
    y para Firefox:
    https://developer.mozilla.org/fr/docs/Web/CSS/scrollbar-color
    Tenga en cuenta la indicación 'experimental' en el sitio oficial de Mozilla.

    La mejor solución es, según mi opinión, hacer o bien su propia barra de desplazamiento compatible con múltiples navegadores (o usar un script que haga lo mismo) con CSS y un poco de JavaScript, o bien no hacer nada y mejorar el diseño.
    De hecho, usar un script complicado para un resultado experimental (y destinado a cambiar con la evolución de la web) no me parece siempre una buena idea. Especialmente si aún no conoces la programación, será complicado y comenzarás haciendo cosas bastante dudosas (en todo caso, bastante complejas para obtener un resultado bastante malo) en lugar de seguir métodos y formas de hacer más limpias y basadas en buenos hábitos.
    La personalización de las barras de desplazamiento efectivamente no es ideal por ahora (en el lado del CSS), pero también proviene del hecho de que permite al usuario identificar claramente una herramienta de navegación, así que es mejor reservarlo para casos muy específicos para no perder ergonomía y asegurarse de que el usuario sepa directamente sobre qué debe actuar para consultar el contenido del sitio.
    1
  2. zacreur
     
    Hola, gracias por tu respuesta.
    Como dije, también envié mi pregunta en Openclassroom.
    La persona que me respondió me hizo la misma observación que usted, es decir, que revisara el código y me propuso usar Js fiddle.
    Y fue al utilizar eso que el software me hizo notar ciertos errores, así que procedí a corregirlos y así fue como mi problema se resolvió.

    De todos modos, ¡gracias nuevamente por su respuesta!
    ¡Cordialmente!
    0