Блог

Я пытаюсь обработать 3 столбца, каждый из которых имеет независимую прокрутку. В первом столбце есть абсолютный элемент, который должен переполняться по оси x, но overflow-x:visible не работает в сочетании с overflow-y: auto

Можете ли вы мне помочь?

 .container {
  display: flex;
}

.column2 {
  width: 60%;
  background-color: #bababa;
  height: 5000px;
}

.side-column {
  width: 20%;
  background-color: #eeeeee;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  overflow-x: visible;
}

.side-content {
  width: 100%;
  height: 3000px;
}

.picker {
  position: absolute;
  top: 25px;
  left: 25px;
  height: 300px;
  width: 300px;
  background-color: #f00;
}

.column3 {
  height: 100px;
} 

 <div class="container">
  <div class="side-column">
    <div class="side-content">
      column1
      <div class="picker"></div>
    </div>
  </div>
  <div class="column2">
    content
  </div>
  <div class="side-column column3">
    <div class="side-content">
      column3
    </div>
  </div>
</div> 

https://jsfiddle.net/burro92/nvepx7dL/

Старайтесь избегать неиспользуемых полей…

Работает overflow: auto; только тогда, когда внутреннее содержимое имеет большую ширину или высоту, чем контейнер. Если это так, он автоматически добавит полосу прокрутки.

как насчет этого кода … HTML

 <div class="container">
    <div class="column1">
      
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum aperiam, repellendus sequi debitis dolorum illo hic sed, cumque voluptatibus magnam sint architecto ullam laboriosam ipsa molestias culpa ab possimus soluta nobis omnis? Ab praesentium consectetur, est laborum voluptatem vitae, accusantium cum odio voluptates consequatur mollitia maxime assumenda sapiente dignissimos quo quis? Sit nulla esse deleniti odio asperiores perspiciatis, autem animi impedit quasi laborum minus labore natus delectus quaerat dolorem. Soluta tempora animi id quo recusandae nulla, cupiditate itaque voluptatem odit. Veritatis nemo quos temporibus soluta voluptas, quae facilis vel laboriosam labore. Debitis illo, harum fugiat quo laboriosam tenetur mollitia perspiciatis.
        </p>
        
      
    </div>
    <div class="column2">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum aperiam, repellendus sequi debitis dolorum illo hic sed, cumque voluptatibus magnam sint architecto ullam laboriosam ipsa molestias culpa ab possimus soluta nobis omnis? Ab praesentium consectetur, est laborum voluptatem vitae, accusantium cum odio voluptates consequatur mollitia maxime assumenda sapiente dignissimos quo quis? Sit nulla esse deleniti odio asperiores perspiciatis, autem animi impedit quasi laborum minus labore natus delectus quaerat dolorem. Soluta tempora animi id quo recusandae nulla, cupiditate itaque voluptatem odit. Veritatis nemo quos temporibus soluta voluptas, quae facilis vel laboriosam labore. Debitis illo, harum fugiat quo laboriosam tenetur mollitia perspiciatis.
        </p>
    </div>
    <div class="column3">
     
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum aperiam, repellendus sequi debitis dolorum illo hic sed, cumque voluptatibus magnam sint architecto ullam laboriosam ipsa molestias culpa ab possimus soluta nobis omnis? Ab praesentium consectetur, est laborum voluptatem vitae, accusantium cum odio voluptates consequatur mollitia maxime assumenda sapiente dignissimos quo quis? Sit nulla esse deleniti odio asperiores perspiciatis, autem animi impedit quasi laborum minus labore natus delectus quaerat dolorem. Soluta tempora animi id quo recusandae nulla, cupiditate itaque voluptatem odit. Veritatis nemo quos temporibus soluta voluptas, quae facilis vel laboriosam labore. Debitis illo, harum fugiat quo laboriosam tenetur mollitia perspiciatis.
        </p>
      
    </div>
</div>
 

CSS

 .container{
    display: flex;
}


.column1{
    width: 20%;
    height: 300px;
    background-color: rgb(211, 210, 210);
    overflow: auto;
}

.column2{
    width: 60%;
    height: 300px;
    background-color: rgb(255, 255, 255);
    overflow: auto;
}


.column3{
    width: 20%;
    height: 300px;
    background-color: rgb(211, 210, 210);
    overflow: auto;
}
 

Вывод

При необходимости он автоматически добавит полосу прокрутки. Но если вы хотите, чтобы полоса прокрутки находилась на определенной стороне, просто измените overflow: auto; overflow-y: auto; ее на или overflow-x: auto; .

Не делайте это как overflow: scroll; , потому что он всегда будет добавлять полосу прокрутки, независимо от того, прокручивается она или нет. Поэтому избегайте использования этого