Por favor, vea este ejemplo mínimo.  .container {posición: relativa; ancho: 200px; altura: 200px; borde: 3px gris sólido; desbordamiento: desplazamiento; } .box {ancho: 100%; altura: 800px; ...

css
0
Joseph Wang 15 mar. 2021 a las 08:51

1 respuesta

La mejor respuesta

Puede que este no sea el camino más corto hacia una solución, pero funciona. Podría resistir las pruebas en varios navegadores si no necesita ser compatible con IE.

Esto está usando una clase loading en el contenedor que aplica un pseudo-elemento ::before pegajoso, con un margen inferior negativo para hacer que el contenido aparezca debajo de él. Un poco tonto, pero es una situación extraña. También eliminé algunos valores de ancho innecesarios y cambié overflow a overflow-y, lo que puede ser útil o no en su situación.

Con esto, puede activar y desactivar el mensaje "Cargando" agregando o quitando la clase al contenedor.

.container {
  position: relative;
  width: 200px;
  height: 200px;
  border: 3px solid gray;
  overflow-y: scroll;
}

.box {
  height: 800px;
  background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
}

.container.loading::before {
  position: sticky;
  top: 0;
  height: 200px;
  margin-bottom: -200px;
  background: white;
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
  content: 'Loading';
}
<div class="container loading">

     <div class="box"></div>

</div>
1
tobybot 15 mar. 2021 a las 06:22