3

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

Вот идеальный пример того что хочу это на сайте apple.com если кликнуть по поиску, то скроллбар как бы остаётся и из него только пропадает сам бегунок и получается аналогичный эффект как при overflow:hidden, но при этом сайт не дергается на эти самые 10/13/16 пикселей.

Попытался посмотреть как у них это реализовано, но понять не смог... Возможно js или еще как-то... В гугле искал ничего толкового не смог найти, все советы просто скрыть скроллбар и всё.

1
  • Вообще у ссылок в меню есть padding'и, а у меню нет своей высоты(height: auto) и когда мы прячем списки меню у него (height: 0) и сайт съезжает, в данном случае нужно самой меню задать min-height. Или как сделано в apple для меню задать position: fixed
    – Netahaki
    26 июл 2018 в 8:41

1 ответ 1

3

добавьте в css:

html {
  overflow-y: scroll;
}
2
  • 1
    Опередил.)) А у body при этом overflow:hidden и высота 100%
    – zhurof
    26 июл 2018 в 8:42
  • Да действительно что-то получается, но есть несколько нюансов :-) Получается модалка находится в футере, и если у боди стоит 100% , то скролл так же остаётся, если убрать height то сайт прокручивается к шапке, но со скроллбаром выходит нужный эффект... Вот как-то еще сдлеать этот нюанс :-)
    – Nilsan
    26 июл 2018 в 9:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.