• 0
ows.nightwolf

overflow-y: visible не работает если overflow-x: hidden

Вопрос

Всем доброго времени суток

У меня возникла проблема с overflow. Вот упрощенный пример, для того чтоб "потрогать" проблему. В этом примере есть контейнер, и в нем абсолютно позиционированный элемент. Контейнеру заданы свойства overflow-x: hidden и overflow-y: visible для того чтобы все что вылазит за пределы контейнера по оси X скрывалось, а все что вылазит по оси Y - показывалось, при этом скролл на компоненте отображаться не должен. Но эта связка не работает (как видно на примере - у контейнера появляется скролл бар), однако если у контейнера изменить overflow-x c hidden на visible все работает как надо - скролл бар пропадает и абсолютно позиционированный элемент становится полностью видим, вылазя за пределы контейнера.

Вопрос: почему браузеру есть разница установлен ли overflow-x в visible если контент внутри карусели выходит за пределы карусели по оси Y, а не X, и как решить эту проблему?

Изменено пользователем ows.nightwolf

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

14 ответов на этот вопрос

Рекомендуемые сообщения

  • 0

Спасибо всем за помощь, что в итоге:

В 11.10.2017 в 19:12, npofopr сказал:

Без js вам не сделать. 
Были конечно всякого рода хаки, но проще и лучше с js. 
Погуглите на тему "элемент за пределами overflow", старая это тема. 

Даже здесь на форуме вопросы по ней были.

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

Т.к. ни один из этих вариантов мне не подходит, пришлось идти другим путем и менять принцип действия моего компонента, чтобы избавится от надобности применять к нему overflow: hidden.

Изменено пользователем ows.nightwolf
Уточнение ответа

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Что то я ничего не понял. Вроде всё работает так, как и должно. Одинаково что там, что тут. 

+ вы position:relative хоть чему то укажите, а то ваш absolute как вы болтается не знамо где ему быть. Как укажите, там всё и обрезаться начнёт)

  • Thanks 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
1 час назад, npofopr сказал:

Что то я ничего не понял. Вроде всё работает так, как и должно. Одинаково что там, что тут. 

+ вы position:relative хоть чему то укажите, а то ваш absolute как вы болтается не знамо где ему быть. Как укажите, там всё и обрезаться начнёт)

Спасибо :)  Да, действительно, я упустил position: relative, и после ее добавления оба примера начинают выглядеть одинаково изначально (обрезаются).

Но основная проблема осталась - нужно чтобы все что выходит за пределы элемента по оси X обрезалось, а все что выходит за пределы по оси Y - отображалось.

Я обновил описание проблемы и тему беседы, может так меньше будет взрывать мозг :) 

Изменено пользователем ows.nightwolf

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
<div class="carousel">
  <div class="carousel-page-wrapper" style="transform: translateX(0);">
    absolute element here displays not as expected (scrollbar in container appears)
    <div class="absolute-element"></div>
  </div>
</div>
.carousel {
  position: relative;
  padding: 1em;
  border: solid 1px blue;
  overflow: hidden;
  height: 30px;
}

.carousel-page-wrapper{
overflow:auto;
  width: 100%;
  height: 100%;
  padding: 0 35px 0 0;
}
.absolute-element {
  position: absolute;
  width: 200px;
  height: 200px;
  border: solid 3px darkred;
  background-color: red;
}

Песочница

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
50 минут назад, AlexZaw сказал:

<div class="carousel">
  <div class="carousel-page-wrapper" style="transform: translateX(0);">
    absolute element here displays not as expected (scrollbar in container appears)
    <div class="absolute-element"></div>
  </div>
</div>

.carousel {
  position: relative;
  padding: 1em;
  border: solid 1px blue;
  overflow: hidden;
  height: 30px;
}

.carousel-page-wrapper{
overflow:auto;
  width: 100%;
  height: 100%;
  padding: 0 35px 0 0;
}
.absolute-element {
  position: absolute;
  width: 200px;
  height: 200px;
  border: solid 3px darkred;
  background-color: red;
}

Песочница

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

тогда вот:

/* хром, сафари */
.element::-webkit-scrollbar { width: 0; }

/* ie 10+ */
.element { -ms-overflow-style: none; }

/* фф (свойство больше не работает, других способов тоже нет)*/
.element { overflow: -moz-scrollbars-none; }

только вроде некорректно работает в мобильных браузерах.

либо с помощью JS, вот статейка: https://habrahabr.ru/company/2gis/blog/169359/

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
56 минут назад, AlexZaw сказал:

тогда вот:


/* хром, сафари */
.element::-webkit-scrollbar { width: 0; }

/* ie 10+ */
.element { -ms-overflow-style: none; }

/* фф (свойство больше не работает, других способов тоже нет)*/
.element { overflow: -moz-scrollbars-none; }

только вроде некорректно работает в мобильных браузерах.

либо с помощью JS, вот статейка: https://habrahabr.ru/company/2gis/blog/169359/

Насколько я вижу это все просто заставляет скроллбар не отображаться, но не оказывает влияния на то как элемент ведет себя.

Мне же нужно чтобы все выглядело так, как выглядит когда элементу .carousel задаешь overflow: visible, но в этом случае есть один момент - контент будет вылазить за пределы карусели и по оси X (по горизонтали), а мне это не нужно.

Изменено пользователем ows.nightwolf

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Вы чего добиться то в итоге хотите? Карусель сделать? 
Самый лучший вариант, посмотреть как сделано в готовых каруселях. 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Совсем запутался. Должно работать так как в примере, но только без скроллбара, или еще как-то?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
1 час назад, npofopr сказал:

Вы чего добиться то в итоге хотите? Карусель сделать? 
Самый лучший вариант, посмотреть как сделано в готовых каруселях. 

Хочу добиться того чтобы контейнер выпадающего списка (коим в реальном проекте и является абсолютно позиционированный красный элемент) визуально отображался поверх объекта .carousel, а не внутри него.

Это можно было бы сделать если поместить абсолютно позиционированный элемент за пределы карусели, дать ему position: fixed или absolute и потом js ом задать нужные координаты, но у меня нет возможности так сделать т.к. этот элемент создается плагином (jquery-nice-select).

 

49 минут назад, AlexZaw сказал:

Совсем запутался. Должно работать так как в примере, но только без скроллбара, или еще как-то?

Должно работать точно так же как если в примере раскомментить строку в css файле которую я закомментил, и там еще подписал что если ее раскомментить то все будет работать как надо (If you uncomment this property - scrollbar disappears), с одним отличием - по оси X контент не должен выходить за пределы контейнера (в примере этого не видно, но т.к. overflow-x: visible - контент будет видим по оси X)

Изменено пользователем ows.nightwolf

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Без js вам не сделать. 
Были конечно всякого рода хаки, но проще и лучше с js. 
Погуглите на тему "элемент за пределами overflow", старая это тема. 

Даже здесь на форуме вопросы по ней были.

  • Thanks 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Возможно можно взять за основу это https://jsfiddle.net/4uus7Lh0/2/
на 5 слайде сделал absolute выпадающее меню за пределы slider

  • Thanks 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
14 часа назад, npofopr сказал:

Без js вам не сделать. 
Были конечно всякого рода хаки, но проще и лучше с js. 
Погуглите на тему "элемент за пределами overflow", старая это тема. 

Даже здесь на форуме вопросы по ней были.

Да, спасибо большое, действительно нашел по этой теме и на stackowerflow и на нашем форуме ответы. Например, в этой теме содержится нужная информация https://htmlforum.io/topic/55822-overflow-ogranichivaet-absolyutnyiy-blok/ 

1 час назад, Switch74 сказал:

Возможно можно взять за основу это https://jsfiddle.net/4uus7Lh0/2/
на 5 слайде сделал absolute выпадающее меню за пределы slider

Благодарю, этот вариант подойдет если заранее известны высота и/или ширина контейнера, у меня же они динамические.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас


  • Похожие публикации

    • Автор: Launder
      Столкнулся со следующим странным поведением.
      В хроме пока работает transition, фон просвечивает через border-radius (наведите на первый пункт).
      В Лисе градиент имеют такую особенность: полосочка 10px, полосочка 10px, прозрачность, на стыке второй полосочки и прозрачности образуется некий серый фон толщиной пикселя в два. Поскольку фон в примере двухнаправленный, то Вы, убрав одно направление (65 или 66 строчка, не забудте в конце оставленной строчки поставить точку с запятой ), можете увидеть что полоска есть только в том направлении, где нулевой переход из цвета в прозрачность.
      По обеим глюкам: что это? откуда это? куда писать? какие способы бороться?
      Спасибо за внимание
    • Автор: uniken1
      https://jsfiddle.net/6on27wxf/
      Вот такой простой пример. При использовании стиля overflow: hidden; у родительского div увеличивается высота и снизу появляется серая полоса. Если overflow убрать то все нормально. Как сделать overflow: hidden и сохранить высоту?
    • Автор: BoJITyH
      Как сделать, чтобы абсолютный блок не обрезался внешним блоком с ограничением overflow:auto.
      Структура такая:
      <div style='overflow:auto; width:500px;'> <div style='position:relative'> <div style='position:absolute; width:1000px;'> длииииииииииииииииииинннннннннннннннннннннннныыыыыыыыыыыыыыыыыыйййййййййййййййййййй тееееееееееееееееккккккккккккссссссссссссттттттттт </div> </div> </div> Как сделать, что бы блок с текстом не обрезался внешним дивом с overflow, но при этом позиционировался относительно блока relative? 
      z-index менял. В статичный блок абсолютный помещал.

Карта разработчиков

Карта участников

Отметь себя на карте для поиска или предложения работы