Как реализовать прокрутку контента в блоке с фиксированным позиционированием без скроллбара?

Question

[Денис]

Здравствуйте. Подскажите, пожалуйста решение с прокруткой контента в блоке с фиксированным позиционированием. Я нашел решение, но в блок встраивается скроллбар, из-за чего выглядит коряво. Есть ли способ на CSS сделать красивую прокрутку в fixed блоке?

Answer 1

[trushka]

Задать fixed блоку overflow:hidden и обернуть содержимое в div {height: 100%; overflow: auto} Но чтоб скроллбар спрятался, надо его "растянуть" на нужную ширину. Можно туда ещё один div запихнуть с шириной, равной ширине fixed блока и пихать содержимое туда или же задать ::before или ::after такой ширины

Answer 2

[Юрий Кизилов]

manos.malihu.gr/jquery-custom-content-scroller
кастомный скроллбар

Answer 3

[Stalker_RED]

Родительскому блоку overflow:hidden, внутренний блок на 17px шире, и overflow-y: scroll;
https://jsfiddle.net/300vzLey/show/

Comments

[Денис]

Идея хорошая, но не кроссбраузерная, старые браузеры не поддерживают vh еденицы

[Stalker_RED]

Денис, omg! замените vh на px, em, на что вам угодно. Они там только для задания координат fixed блока и размера шрифта.

[Денис]

Stalker_RED, хорошо, а если у фиксированный див, не в body , а вложен в другой div. Кстати, в этом решении вы только CSS используете?

[Stalker_RED]

Денис, да, это без скриптов.

Справа вверху ссылка "edit", там все исходники, можно на месте редактировать, жать ctrl+enter и смотреть что получается.

Пример попроще: https://jsfiddle.net/300vzLey/1/