-->

Прокрутка модального окна | CSS

Если содержимого в модальном окне много, то прокручивать следует его, а не scrollbar <html>. Но полосу прокрутки <html> перекрыть нельзя: .

Зато можно накрыть полосу прокрутки <body>. Вот вариант кода чтобы <html> и <body> имели высоту, равную высоте окна браузера: 

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body {
  overflow: auto; /* добавить полосу прокрутки */ 
}
Из-за того, что полоса прокрутки не удаляется, никаких сдвигов содержания не происходит: .
Ларчик Случается нередко нам И труд и мудрость видеть там, Где стоит только догадаться За дело просто взяться. К кому-то принесли от мастера Ларец. Отделкой, чистотой Ларец в глаза кидался; Ну, всякий Ларчиком прекрасным любовался. Вот входит в комнату механики мудрец. Взглянув на Ларчик, он сказал: "Ларец с секретом, Так; он и без замка; А я берусь открыть; да, да, уверен в этом; Не смейтесь так исподтишка! Я отыщу секрет и Ларчик вам открою: В механике и я чего-нибудь да стою". Вот за Ларец принялся он: Вертит его со всех сторон И голову свою ломает; То гвоздик, то другой, то скобку пожимает. Тут, глядя на него, иной Качает головой; Те шепчутся, а те смеются меж собой. В ушах лишь только отдается: "Не тут, не так, не там!" Механик пуще рвется. Потел, потел; но наконец устал, От Ларчика отстал И, как открыть его, никак не догадался; А Ларчик просто открывался. Иван Андреевич Крылов
в f t
наверх ↑

2 комментария:

Unknown
Стрелками скроллируется главное окно
NMitra
Верное замечание! Нужно дать фокус всплывающему окну. На CSS можно чтобы кнопка становилась модальным окном. На JS можно отлавливать клик по кнопке и передавать фокус модальному окну.

Извините, комментарии в рамках данной статьи не предусмотрены.