0
255
ViewsElemento animado no visible fuera del contenedor principal en Firefox
Tengo un div animado que vuela a la esquina superior derecha de la ventana gráfica.
Sin embargo, debido a las propiedades de overflow , no es visible fuera del contenedor principal en Firefox. Es perfectamente visible en Chrome.
Elemento detrás de la barra de desplazamiento en Firefox:
Elemento correctamente sobre el padre en Chrome:
¿Cómo puedo hacer que funcione también en Firefox? Si overflow-y: auto se elimina de .container , el problema ya no aparece, pero esa no es una solución viable ya que necesito el contenido desplazable.
Aquí hay un ejemplo. Puedes comprobar que produce el comportamiento deseado en Chrome, pero no en Firefox:
.app { overflow: hidden; } .container { width: 260px; max-height: 400px; background: blue; left: 10px; right: 10px; top: 10px; position: fixed; z-index: 500; overflow-y: auto; } .wrapper { height: 250px; padding: 10px; margin: 5px; background: yellow; top: 5px; position: sticky; } .content { height: 600px; margin: 5px; background: orange; } @keyframes fly-to-top { 10% { top: 150px; right: 80%; width: 50px; } 30% { top: 120px; right: 70%; width: 45px; } 60% { top: 75px; right: 40%; width: 40px; } 100% { top: 10px; right: 160px; width: 35px; } } .animated { position: fixed; right: unset; top: 165px; width: 50px; background: red; color: white; animation: fly-to-top linear 2s forwards; display: flex; align-items: flex-start; } <div class="app"> <div class="container"> <div class="wrapper"> <div class="animated"> Text </div> </div> <div class="content"> Lorem ipsum </div> </div> </div>2 answers
Answer question0
Prueba esta splución:
- Posición de
.wrapperestablecida en fijo -
.contentse desplaza hacia abajo contransform: translateY() - En la clase
.wrapper, se agregaronpointer-events: none;, porque si el cursor está en el bloque.wrappersin esta propiedad, la rueda del mouse no puede desplazar el contenido, el desplazamiento funciona solo cuando se arrastra la barra de desplazamiento.
.app { overflow: hidden; } .container { width: 260px; max-height: 400px; background: blue; left: 10px; right: 10px; top: 10px; position: fixed; z-index: 500; overflow-y: auto; } .wrapper { display: flex; height: 250px; padding: 10px; margin: 5px; background: yellow; /* top: 5px; */ position: fixed; /* changed */ /* calculate '.container' width - scroll-track-width(12px-17px) - '.wrapper' padding(left, right) - margin(left, right) */ width: calc(260px - 12px - 20px - 10px); z-index: 5; pointer-events: none; /* mouse wheel work with this property */ } .content { height: 600px; margin: 5px; background: orange; /* calculate '.wrapper' properties to shift '.content' down */ /* height + padding(top, bottom) + margin-bottom */ transform: translateY(calc(250px + 20px + 5px)); } @keyframes fly-to-top { 10% { top: 150px; right: 80%; width: 50px; } 30% { top: 120px; right: 70%; width: 45px; } 60% { top: 75px; right: 40%; width: 40px; } 100% { top: 10px; right: 160px; width: 35px; } } .animated { position: fixed; right: unset; top: 165px; width: 50px; background: red; color: white; animation: fly-to-top linear 2s forwards; display: flex; align-items: flex-start; z-index: 100; } <div class="app"> <div class="container"> <div class="wrapper"> <div class="animated"> Text </div> </div> <div class="content"> Lorem ipsum </div> </div> </div>0
Editado después del comentario:
Puede sacar el elemento animado de su padre (es decir, el elemento que tiene overflow: hidden ), en un nivel superior en el código HTML, como hermano del contenedor. Lo hice en el fragmento a continuación y también agregué un z-index que coloca el elemento animado sobre el contenedor:
.app { overflow: hidden; } .container { width: 260px; max-height: 400px; background: blue; left: 10px; right: 10px; top: 10px; position: fixed; z-index: 500; overflow-y: auto; } .wrapper { height: 250px; padding: 10px; margin: 5px; background: yellow; top: 5px; position: sticky; } .content { height: 600px; margin: 5px; background: orange; } @keyframes fly-to-top { 10% { top: 150px; right: 80%; width: 50px; } 30% { top: 120px; right: 70%; width: 45px; } 60% { top: 75px; right: 40%; width: 40px; } 100% { top: 10px; right: 160px; width: 35px; } } .animated { position: fixed; right: unset; top: 165px; width: 50px; background: red; color: white; animation: fly-to-top linear 2s forwards; display: flex; align-items: flex-start; z-index: 501; } <div class="app"> <div class="container"> <div class="wrapper"> </div> <div class="content"> Lorem ipsum </div> </div> <div class="animated"> Text </div> </div>