fix: disable body scrolling when navbar is collapsed on mobile

This commit is contained in:
Mark Dumay
2025-10-05 08:47:40 +02:00
parent 5adb00d02a
commit c4fd974e99
3 changed files with 118 additions and 45 deletions

View File

@@ -4,6 +4,8 @@ const togglers = document.querySelectorAll('.main-nav-toggler')
const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
const colorsBG = ['body', 'secondary', 'tertiary']
let scrollPosition = 0
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}
@@ -175,6 +177,20 @@ if (navbar !== null && togglers !== null) {
document.addEventListener('resize', () => fixed && updateNavbar())
document.addEventListener('scroll', () => fixed && updateNavbar())
// hook up collapse events
document.querySelectorAll('.navbar-collapse').forEach((collapse) => {
collapse.addEventListener('show.bs.collapse', function () {
scrollPosition = window.pageYOffset
document.body.style.top = `-${scrollPosition}px`
document.body.classList.add('navbar-open')
})
collapse.addEventListener('hide.bs.collapse', function () {
document.body.classList.remove('navbar-open')
document.body.style.top = ''
window.scrollTo({ top: scrollPosition, behavior: 'instant' })
})
})
// observe state changes to the site's color mode
const html = document.querySelector('html')
const config = {