как прокрутить два деления независимо друг от друга, используя css

Question

У меня есть макет страницы по ссылке ниже. когда я прокручиваю область внутреннего окна, прокручиваются оба элемента div ..

Ссылка на код

Я хочу два элемента div (первый столбец, второй столбец) внутри Внутреннее окно для самостоятельной прокрутки. И отключите прокрутку, если содержимое находится в пределах высоты порта просмотра. Это возможно сделать только с CSS?

Answer 1

Добавьте прокрутку к независимому классу, а также вы должны установить, на какую max высоту вы хотите, чтобы контент имел прокрутку, для примера ниже я использовал 400px в качестве высоты, опубликуйте эту высоту, которую вы будете есть прокрутка.

Бонусный совет

При использовании flex для направления flex-direction:row; по умолчанию вам не нужно специально использовать это .

.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>

Answer 2

Я не пробовал, но я бы попробовал установить overflow-y: scroll в файле CSS для каждого div. Это должно автоматически добавить функциональность прокрутки, когда высота содержимого превышает высоту div (при условии, что у вас установлена ​​фиксированная высота). Если это не сработает, не стесняйтесь, дайте мне знать. Удачи!