1. Главная
  2. Блог
  3. Полезные статьи
  4. Свойство overflow-y: visible работает как scroll

Свойство overflow-y: visible работает как scroll

21 октября 2023
70

Свойство CSS overflow определяет, необходимо ли для переполненного блочного элемента содержимое обрезать, предоставить полосы прокрутки или просто отобразить.

У нас появилась задача создать у элементов owl carousel всплывающие блоки tooltips.

Сразу столкнулись с тем, что всплывающий блок не отображается целиком, хотя в коде он присутствует и у него есть свойство position: absolute.

overflow hidden

А всё потому, что у блока с элементами карусели скрыта часть содержимого, которая не поместилась в контейнере.

.owl-carousel .owl-stage-outer { overflow: hidden; }

В данном случае нам не подойдет замена на overflow: visible;, т.к. в таком случае будет отображаться не только наш блок tooltip, но и все скрытые элементы карусели. В данном случае напрашивается такое решение:

.owl-carousel .owl-stage-outer { overflow-y: visible; overflow-x: hidden; }

Но, оно даёт совершенно неожиданный результат. Вместо отображения по вертикали всплывающего блока, мы получаем вертикальные полосы прокрутки.

overflow auto scroll

А связано это с "замечательной" особенностью свойства overflow, если значение для отображения по горизонтали overflow-x: hidden, а по вертикали - overflow-y: visible, то значение по вертикали работает как overflow-y: auto, а оно автоматически определяет, нужно ли добавлять полосы прокрутки scroll. Полосы появляются, когда содержимое выпадает из родительского контейнера.

В интернете в большинстве случаев данную проблему предлагают решить с помощью js. Но, на самом деле всё гораздо проще. Достаточно visible поменять на clip. И наш блок tooltip появился!

.owl-carousel .owl-stage-outer { overflow-y: visible; overflow-x: clip; } overflow clip
Комментарии
Name
Email
Phone
Ваше имя
Ваш email
Оставить комментарий
Нажмите для звонка
Хотите заказать сайт?
Обращайтесь любым удобным способом и мы поможем подобрать интересный вариант для Вас!