Как выйти за пределы скролла?

Question

[Никита Кравченко]

Всем привет! У меня стоит кастомный скроллбар "jQuery custom content scroller" на блоке и прокручивается в нем контент. Нужно чтобы pop-up окно выходило немного за пределы самого скролла. Вынести pop-up за див с скроллом не получится, нужно именно внутри.
Как лучше поступить? Может лучше использовать другой кастомный скролл?

Comments

[iBird Rose]

а подробнее? скрин? а лучше код

[Никита Кравченко]

iBird Rose: ну тут не нужен скрин или код. Обычный скролл.
У меня position absolute не выходит за пределы overflow hidden. Пробывал обернуть в position relative

Answer 1

[trushka]

Сделайте вашему блоку с прокруткой соответствующие padding'и и всё будет видно

Comments

[Никита Кравченко]

Я уже так и сделал, вчера. Спасибо

Answer 2

[nepster-web]

В таком случае вы можете чуть-чуть накостылять. Например когда вам нужно открыть окно, вы с помощью js выносите код окна в конец body например и только потом открываете.

Comments

[Никита Кравченко]

Дело в том, это popup окно становится поверх блока с контентом, а этих блоков много, ну вы поняли. И если нажать на любое окно, то оно откроется поверх его. А если вывести в конец body, то получится что я не знаю высоту. Т.е. может быть они нажали на 5 кнопку, мне неизвестно, кол-во тоже не известно

[nepster-web]

Никита Кравченко: мне кажется, что-то вы делаете не так. Оформляйте на https://jsfiddle.net/ и в студию.

[Никита Кравченко]

nepster09: codepen.io/Kravchenko55/pen/XjbKmb

[nepster-web]

Никита Кравченко:

Покрылся аллергическими пятнами от саса и джейда. Жуткая аллергия на предпроцессоры html и на sass. Поэтому к сожалению в ту грязь не мокнусь, но снова предложу идею с манипуляцией окон.

Что-бы знать к какому блоку какое окно принадлежит, можно воспользоваться data атрибутами. Например:
.item data-target="hint-1"
| Lorem ipsum dolor sit amet.
.popup
| Some text

При клике на .item получаем data-target значение, далее получаем по дочернему селектору объект .popup присваиваем ему id = hint-1 и выносим в конец body.

[nepster-web]

Никита Кравченко: у вас в любом случае не получится обойти overflow:hidden, только по думал о проблеме с координатами появления подсказки. Тут уже нужно чуть больше кода. Например можно обернуть блок еще в 1 блок но уже без overflow и закинуть блок с подсказкой в него. Чтобы было как-то так:

div class="wrapper"
div class="item" data-target="hint-1"
| Lorem ipsum dolor sit amet.
div class="popup"Some text div
div

Answer 3

[Максим Тимофеев]

Создаете пустой div размером как попаап который растянет родительский див со скролом (увеличит скрол). Если я понял задачу.

Comments

[Никита Кравченко]

Дело в том, это popup окно становится поверх блока с контентом, а этих блоков много, ну вы поняли. И если нажать на любое окно, то оно откроется поверх его. А если вывести в конец body, то получится что я не знаю высоту. Т.е. может быть они нажали на 5 кнопку, мне неизвестно, кол-во тоже не известно

[Никита Кравченко]

codepen.io/Kravchenko55/pen/XjbKmb