0
108
Viewsreteniendo el efecto de desplazamiento cuando hay un div posicionado absoluto en la parte superior
Tengo un contenedor div en el que hay un control desplegable. Al hacer clic en el botón desplegable, se abre el menú desplegable. El problema inicial que tuve fue que si el contenedor div tiene una altura muy pequeña, el menú desplegable se abre pero da como resultado una barra de desplazamiento. Descubrí que no es posible tener overflow-x: scroll y overflow-y: visible al mismo tiempo. Esto me obligó a una nueva estrategia para el menú desplegable. Es decir, usar @floating-ui (próxima versión después de Popper 2) que permite colocar un elemento en relación con el otro. Entonces, al hacer clic en el botón desplegable, muevo el menú desplegable desde su padre inmediato al cuerpo del documento (para que todo el menú desplegable esté siempre visible) y luego adjunto la interfaz de usuario flotante. Todo esto funciona muy bien. El único problema que queda es que los menús desplegables se mostraban inicialmente solo cuando el usuario se desplaza sobre el contenedor. Pero dado que el menú desplegable se mueve al cuerpo del documento, pasar el mouse sobre el menú desplegable ya no crea el efecto de desplazamiento en el contenedor. Algunas de las respuestas sugieren usar pointer-event to none para el div absoluto para que los eventos de puntero se propaguen hacia abajo. Sin embargo, en mi caso, quiero que el usuario use el mouse para hacer clic en cualquiera de las acciones dentro del menú desplegable.
Entonces, ¿cómo logro el efecto que quiero que resumo a continuación?
- Un contenedor div que al
:hoverel mouse muestra una barra de navegación con botones desplegables. - Al hacer clic en cualquiera de los botones desplegables, se abrirá el menú desplegable justo debajo de ese botón.
- Todo el contenido del menú desplegable debe estar visible incluso si la altura del contenedor es más pequeña que el menú desplegable.
- Mientras el mouse está en el menú desplegable, la barra de navegación debería continuar apareciendo.
2 answers
Answer question0
Ejemplo muy simple de Vanilla JS que utiliza un tiempo de espera con un retraso menor para determinar si se debe ocultar o no al salir.
let hideTimeout = false; document.getElementById("hover-me").onmouseenter = function(event){ document.getElementById("dropdown").style.display = ""; } document.getElementById("hover-me").onmouseleave = function(event){ hideTimeout = setTimeout(function(){ document.getElementById("dropdown").style.display = "none"; }, 10) } document.getElementById("dropdown").onmouseenter = function(event){ if(hideTimeout !== false){ clearTimeout(hideTimeout); hideTimeout = false; } } document.getElementById("dropdown").onmouseleave = function(event){ document.getElementById("dropdown").style.display = "none"; } #hover-me { width:40px; height:40px; background: blue; } #dropdown { position: absolute; top: 20px; left: 20px; width: 60px; height: 40px; background: #eee; box-shadow : 0 0 4px #555; } <div id="hover-me"></div> <div id="dropdown" style="display:none;"> Some content </div>0
Resolví esto agregando controladores onopen y onclose al menú desplegable y las devoluciones de llamada agregarán/eliminarán una clase en el contenedor que se usa para mantener la barra de menú visible mientras el menú desplegable está abierto.