Pregunta La barra de desplazamiento de los navegadores está debajo de mi div fijo


Tengo un encabezado fijo con un ancho del 100%.

#header {
background: #2e2e2e;
width: 100%;
z-index: 999;
position: fixed;
}

la barra de desplazamiento de los navegadores está debajo de mi div fijo. ¿Cómo arreglar eso?

scrollbar


32
2017-10-23 10:38


origen


Respuestas:


es porque el overflow-x: hidden; en la línea de base.css número 9

body {
    color: #444444;
    font: 13px/20px Arial,Helvetica,sans-serif;
    overflow-x: hidden; // remove this 
}

30
2017-10-23 10:39



Esto se puede resolver agregando desbordamiento de cuerpo

de

overflow:auto;

a

overflow:auto;
overflow:initial;

Este es tu problema

Si su desplazamiento se establece en el cuerpo, si está estructurado como cuerpo> envoltura> encabezado (con posición fija), contenido así sucesivamente

a continuación está tu solución

solución para el problema

Nota: esto funcionará solo en el cuerpo pero no en el contenedor div con desplazamiento. también puede trabajar con z-index para que funcione, pero especificará z-index para juntar otros elementos para hacerlo bien.

Espero que esto ayude..:)


9
2018-02-28 14:31



Un css hack (finalmente encontré un camino) para esto sin mucha explicación hecha rápidamente - el primer elemento flotante es. Creo que para entender el principio de cómo funciona desde el siguiente código.

Actualización: Y existe un problema para los navegadores de dispositivos móviles que se encuentran a continuación para evaluar si usted está de acuerdo o no con eso.

<div style="position: fixed;top: 0;width: 100%;left: 0;z-index: 100000;height: 200px;background: #f00;">

<div id="aaaaa" style="display: block;float:right;color: #000;overflow-y:scroll;min-height:20px;top: -100px;background: #0f0;border: 1px solid #0f0;"></div>
<div id="bbbb" style="display: block;position:relative;color: #000;overflow:hidden;min-height:20px;background: #f0f;border: 1px solid #00f;">sdfasdf sdfas s as as fasd fasd fasdfasd fasd asdf asd fasdf sadf asdf asdf asdf sad fasdf asdf asdf asd fasdf asdf asdf asd fsad sad sfd

        <div style="width: 100%;height: 20px;background: #5ff"></div>

</div>

 

Y el código final, casi lo mismo con las cosas que quiere ver visibles y de trabajo

<div style="position: fixed;top: 0;width: 100%;left: 0;z-index: 100000;height: 0px;overflow:visible;background: #f00;">

<div id="aaaaa" style="display: block;float:right;color: #000;overflow-y:scroll;visibility:hidden;min-height:20px;top: -100px;background: #0f0;border: 1px solid #0f0;"></div>
<div id="bbbb" style="display: block;position:relative;color: #000;overflow:hidden;min-height:20px;background: #f0f;border: 1px solid #00f;">sdfasdf sdfas s as as fasd fasd fasdfasd fasd asdf asd fasdf sadf asdf asdf asdf sad fasdf asdf asdf asd fasdf asdf asdf asd fsad sad sfd

        <div style="width: 100%;height: 20px;background: #5ff"></div>

</div>

 

Lo que es importante, funciona con los navegadores de dispositivos móviles y de escritorio. De hecho, por el momento probé el móvil en Windows Edge cuando mi computadora cambió al modo tableta y luego al escritorio uno. El código funciona todo el tiempo. Comprobar si esto funciona o no con: before en lugar de div id = "aaaa" para hacerlo más css puro y divs adicionales dependientes.

Actualización: no funciona bien con antes porque el navegador Edge no cambia la barra de desplazamiento cuando se ingresa al modo tableta.

Si encuentra problemas con los contenidos ocultos en el elemento bbbb intente no colocar: elementos absolutos / fijos en el contenedor bbbb.

No lo he probado todavía para todas las situaciones y navegadores.

Actualizar: el problema mencionado en algún lugar en la parte superior de esta respuesta, sin embargo, en los navegadores móviles la barra de desplazamiento está cubierta porque la barra de desplazamiento es dinámica, aparece solo cuando se desplaza y usted sabe que no forma parte de ningún contenedor. La barra de desplazamiento probablemente sea muy delgada en todos los navegadores, por lo que debe decidir qué hacer con ella. Tal vez un pequeño margen de 5 píxeles o menos?


1
2018-01-31 23:41



Tuve este problema, mi barra de desplazamiento estaba debajo de mi encabezado fijo y resolví esto después de eliminar de mi etiqueta html height: 100%; y agregué otras propiedades para asegurarme de tener el mismo resultado. Ninguna de las otras soluciones me ayudó. Espero que esto ayude a alguien.


1
2018-06-21 09:56



El problema no es con overflow-x en la etiqueta del cuerpo Es por culpa de overflow-x yoverflow-y sobre el html etiqueta. Una vez que eliminé esto de la etiqueta HTML, podría poner cualquier desbordamiento que quisiera en mi cuerpo.

Esto sucede cuando:

  • overflow-x está configurado para cualquiera auto, hidden, overflow, o scroll
  • overflow-y está configurado para cualquiera auto, hidden, -webkit-paged-x, o -webkit-paged-y

No tiene que ser una llamada explícita a overflow-x o overflow-y, como overflow establece a ambos.

Estoy en Chrome 67 con Windows 10.


0
2018-06-28 11:24