Tengo un diseño de página en el siguiente enlace. cuando desplazo el área de la ventana interior, ambos divs se desplazan ...

Enlace al código

Quiero dos divs (primera columna, segunda columna) dentro de la ventana interna para desplazarse de forma independiente. Y deshabilite el desplazamiento si el contenido está dentro de la altura del puerto de vista. ¿Es eso posible hacer solo con CSS?

1
Full Stack Brain 17 abr. 2020 a las 19:45

2 respuestas

Agregue desplazamiento a la clase independiente y también debe establecer a qué altura max desea que el contenido tenga desplazamiento, para el ejemplo a continuación he usado 400px como la altura, publique esa altura que tendrá desplazamiento .

Consejo de bonificación

Al usar flex para la dirección, flex-direction:row; es predeterminado, no es necesario que lo haga específicamente usa eso.

.fixed-box {
  position: fixed;
  width: 100%;
}

.sticky-header {
  position: fixed;
}

.inner-window {
  border: 1px solid red;
  display: flex;
  flex-direction: row;
}

.first-column {
  overflow-y: auto;
  height: 400px;
}

.second-column {
  overflow-y: auto;
  height: 400px;
}
<div class="row h-100">


  <div class="col-3">

    <div class="col-9 bg-warning h-100 right-window">


      <div class="inner-window">
        <div class="first-column">
          <p>This is first column</p>
          <p>This is first column</p>
          <p>This is first column</p>
          <p>This is first column</p>
          <p>This is first column</p>
          <p>This is first column</p>
          <p>This is first column</p>
          <p>This is first column</p>
          <p>This is first column</p>
          <p>This is first column</p>
          <p>This is first column</p>
          <p>This is first column</p>
          <p>This is first column</p>
          <p>This is first column</p>
          <p>This is first column</p>
          <p>This is first column</p>
          <p>This is first column</p>

        </div>
        <div style="background: green" class="second-column">
          <p>This is second column</p>
          <p>This is second column</p>

          <p>This is second column</p>
          <p>This is second column</p>
          <p>This is second column</p>
          <p>This is second column</p>
          <p>This is second column</p>
          <p>This is second column</p>
          <p>This is second column</p>
          <p>This is second column</p>
          <p>This is second column</p>
          <p>This is second column</p>
          <p>This is second column</p>
          <p>This is second column</p>
          <p>This is second column</p>
          <p>This is second column</p>

        </div>
      </div>
    </div>
  </div>
1
Manjuboyz 17 abr. 2020 a las 17:05

No lo he probado, pero intentaría configurar overflow-y: scroll en el archivo CSS para cada div. Eso debería agregar automáticamente la funcionalidad de desplazamiento cuando la altura del contenido excede la altura div (suponiendo que tenga una altura fija establecida). Si no funciona, no dudes en hacérmelo saber. ¡Buena suerte!

1
Tim VanH 17 abr. 2020 a las 16:54