Как зафиксировать видимость блока длиннее экрана по вертикали на css?
хочу сделать боковое меню(на базе ul) с вертикальной ориентацией табов.
меню получается длиннее экрана по вертикали и в связи с этим от него нужно такое поведение
если видна середина меню - меню скролится со страницей
если виден низ меню и скролим вниз меню фиксируется на экране и не скролится
если виден низ и скролим вверх - скролится вместе со страницей
тоже самое но в обратных направлениях касается и верха.
Я могу конечно прописать это на js но хотелось бы на чистом css
Дополнительно:
без скрипта не обойдётесь
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для зафиксирования видимости блока длиннее экрана по вертикали на CSS можно использовать свойство overflow-y со значением scroll или auto.
Пример кода на CSS:
.overflow-container { height: 300px; /* Задаем высоту блока */ overflow-y: scroll; /* Добавляем полосу прокрутки по вертикали */ }
В данном примере мы создаем контейнер с фиксированной высотой и при заполнении его содержимым, если контент превышает высоту контейнера, появляется вертикальная полоса прокрутки, позволяющая просматривать скрытый контент.
Если вы не хотите, чтобы полоса прокрутки всегда отображалась, а только при необходимости, то можно использовать значение auto:
.overflow-container { height: 300px; /* Задаем высоту блока */ overflow-y: auto; /* Полоса прокрутки появится только при необходимости */ }
Таким образом, вы можете легко зафиксировать видимость блока длиннее экрана по вертикали на CSS, используя соответствующие значения свойства overflow-y.