fix blocage défilement

This commit is contained in:
Iziram 2024-08-19 18:22:40 +02:00
parent 11c9ab332f
commit 5624637f30
3 changed files with 34 additions and 8 deletions

View File

@ -271,3 +271,9 @@ print {
body { body {
position: relative; position: relative;
} }
.no-scroll {
overflow: hidden !important;
margin: 0 !important;
height: 100vh !important;
}

View File

@ -20,12 +20,6 @@
box-sizing: border-box; box-sizing: border-box;
} }
.no-scroll {
overflow: hidden !important;
margin: 0 !important;
height: 100vh !important;
}
/* CSS menu */ /* CSS menu */
.sco-formsemestre-menu { .sco-formsemestre-menu {
background-color: var(--sco-formsemestre-color-primary); background-color: var(--sco-formsemestre-color-primary);
@ -372,8 +366,6 @@
// Affichage du menu mobile au clic // Affichage du menu mobile au clic
navbarToggle.addEventListener("click", () => { navbarToggle.addEventListener("click", () => {
document.body.classList.toggle("no-scroll");
navbarMenu.classList.toggle("active"); navbarMenu.classList.toggle("active");
navbarToggle.classList.toggle("active"); navbarToggle.classList.toggle("active");
@ -385,6 +377,10 @@
// Fermeture des dropdowns // Fermeture des dropdowns
dropdownItems.forEach((item) => item.removeAttribute("open")); dropdownItems.forEach((item) => item.removeAttribute("open"));
// Blockage du scroll
toggleScroll();
}); });
// Fermeture du menu mobile au clic en dehors du menu // Fermeture du menu mobile au clic en dehors du menu
@ -393,6 +389,7 @@
navbarMenu.classList.remove("active"); navbarMenu.classList.remove("active");
navbarToggle.classList.remove("active"); navbarToggle.classList.remove("active");
navbarToggle.setAttribute("aria-expanded", "false"); navbarToggle.setAttribute("aria-expanded", "false");
toggleScroll();
} }
}); });

View File

@ -124,6 +124,29 @@
const sidebar = document.querySelector('#sidebar'); const sidebar = document.querySelector('#sidebar');
const expanded = sidebar.getAttribute('aria-expanded') === 'true'; const expanded = sidebar.getAttribute('aria-expanded') === 'true';
sidebar.setAttribute('aria-expanded', !expanded); sidebar.setAttribute('aria-expanded', !expanded);
toggleScroll();
}
function toggleScroll(){
const changeScroll = (b) => {
document.querySelectorAll("body, html").forEach(el => el.classList.toggle("no-scroll", b));
}
const sidebar = document.querySelector('#sidebar');
const formSemestreMenu = document.querySelector('.sco-formsemestre-menu-menu');
const sidebarExpanded = sidebar ? sidebar.getAttribute('aria-expanded') === 'true' : false;
const formSemestreMenuExpanded = formSemestreMenu ? formSemestreMenu.classList.contains("active") : false;
let isScrollToggled = document.body.classList.contains("no-scroll");
if (isScrollToggled && !sidebarExpanded && !formSemestreMenuExpanded) {
changeScroll(false);
}
else if (!isScrollToggled && (sidebarExpanded || formSemestreMenuExpanded)) {
changeScroll(true);
}
} }
</script> </script>