Полноэкранная навигация перескакивает из-за отсутствия полосы прокрутки
У меня есть сайт с полноэкранной навигацией, которая при запуске скрывает переполнение элемента html. Это сделано для остановки прокрутки страницы за навигационной панелью, когда она открыта.
Урезанный SCSS (при активной навигации) выглядит так:
html.nav-is-active {
overflow: hidden
}
nav.active {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1600000;
}Моя проблема в том, что когда навигация открыта, полоса прокрутки исчезает, вызывая скачок страницы - это особенно дезориентирует, поскольку на наложении навигации есть кнопка закрытия, которая должна совпадать с кнопкой меню на сайте.
У меня вопрос, как я могу это решить? Я могу удалить overflow:hidden из элемента html, чтобы сохранить полосу прокрутки, но тогда это означает, что сайт может непреднамеренно прокручиваться при открытой навигационной панели.
Любая помощь приветствуется
Майк
Ответы 2
Это действительно хакер, но он должен делать то, что вы хотите ...
html {
overflow-y: hidden;
}
body {
overflow-y: scroll; // causes an empty scrollbar
height: auto; //set height = content so body can't overflow
}
Таким же образом можно сделать полосу прокрутки видимой в наложении.
ИЛИ Если вы можете определить ширину полосы прокрутки (обычно 15 пикселей на Mac и думаю аналогично Win 10), вы можете вычесть из размера наложения или добавить отступ. Это немного лучше, чем установка оверлея на overflow-y: scroll, поскольку это не приведет к прокрутке ВНУТРИ оверлея на маленьких экранах.
nav.active {
width: calc(100vw - 15px); // could be done with javascript
}
Альтернативой блочной прокрутки без overflow: hidden; является position: fixed; overflow-y:scroll;, поэтому просто измените это:
html.nav-is-active {
overflow: hidden;
}
с этим:
html.nav-is-active {
position: fixed;
overflow-y:scroll;
}
Вы увидите пустую полосу прокрутки, но страница больше не будет "прыгать".
Просто
html.nav-is-active {position: fixed; overflow-y:scroll;}должен помочь.