CSS оверлейное меню, которое останавливает прокрутку фона - PullRequest
Новая
       19

CSS оверлейное меню, которое останавливает прокрутку фона

0 голосов
/ 13 января 2019

Можно ли создать оверлейное меню CSS, которое останавливает прокрутку основного контента, который он накладывает? То есть, когда наложение меню активно, вы можете прокручивать меню, но не содержимое позади него.

Я создал наложение меню, но когда вы прокручиваете меню, оно также прокручивает фоновое содержимое. Есть ли способ заморозить содержимое, когда наложение меню активно?

Вот javascript, который я создал для меню 

// open menu overlay / hide background content   
function openNav() {
    document.querySelector("nav").style.display = "block";
    document.querySelector("body").style.background = "#999";
    document.getElementById("btn-menuclose").style.display = "block";
    document.getElementById("btn-menu").style.display = "none";
    document.getElementById("background").style.display = "none";  
}

//close menu overlay, reveal background content again
function closeNav() {
    document.querySelector("nav").style.display = "none";
    document.querySelector("body").style.background = "#fff";
    document.getElementById("btn-menuclose").style.display = "none";
    document.getElementById("btn-menu").style.display = "block";
    document.getElementById("background").style.display = "block";  
}

Ответы [ 3 ]

0 голосов
/ 13 января 2019

Добавить переполнение: нет тела, когда переполнение: видно, когда оно выключено. 

// open menu overlay / hide background content   
function openNav() {
document.querySelector("nav").style.display = "block";
document.querySelector("body").style.background = "#999";
document.getElementById("btn-menuclose").style.display = "block";
document.getElementById("btn-menu").style.display = "none";
document.getElementById("background").style.display = "none"; 
document.querySelector("body").style.overflow ="none";


}

//close menu overlay, reveal background content again
function closeNav() {
document.querySelector('"body".style.overflow = "visible";
document.querySelector("body").style.background = "#fff";
document.getElementById("btn-menuclose").style.display = "none";
document.getElementById("btn-menu").style.display = "block";
document.getElementById("background").style.display = "none";  
document.querySelector("nav").style.display = "none";

}
0 голосов
/ 13 января 2019

Я недавно столкнулся с той же проблемой, и единственное решение, которое сработало:

  • последовательно
  • на разных устройствах и форм-факторах (iOS Safari - самый болезненный способ обхода)
  • , удовлетворяющий всем требованиям (тело не прокручивается вверх во всплывающем окне, нет странного перелистывания и переключения в Chrome навигации в iOS Safari)

- это библиотека javascript body-scroll-lock . Это не чистый CSS (и я сомневаюсь, что такое решение существует в настоящее время), но так как у вас уже есть методы для открытия и закрытия навигации в js, то это не должно быть проблемой.

0 голосов
/ 13 января 2019

Добавьте overflow: hidden; к селектору, который не должен прокручиваться (и отмените его обратно до видимого впоследствии), например ::

// open menu overlay / hide background content   
function openNav() {
document.querySelector("nav").style.display = "block";
document.querySelector("body").style.background = "#999";
document.getElementById("btn-menuclose").style.display = "block";
document.getElementById("btn-menu").style.display = "none";
document.getElementById("background").style.display = "none";  
document.getElementById("background").style.overflow = "hidden";  
}

//close menu overlay, reveal background content again
function closeNav() {
document.querySelector("nav").style.display = "none";
document.querySelector("body").style.background = "#fff";
document.getElementById("btn-menuclose").style.display = "none";
document.getElementById("btn-menu").style.display = "block";
document.getElementById("background").style.display = "none";  
document.getElementById("background").style.overflow = "visible";
}

При необходимости вы также можете установить его непосредственно на теле.

...