fix(a11y): prevented page scroll when nav menu is opened

Co-authored-by: Massimo Marsan <[email protected]>
Co-authored-by: Andrea Stagi <[email protected]>

src/js/plugins/navbar-collapsible.js

@@ -13,6 +13,7 @@ import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
 
 import { isScreenMobile } from './util/device'
 import { getElementIndex } from './util/dom'
+import { disablePageScroll, enablePageScroll } from './util/pageScroll'
 
 const NAME = 'navbarcollapsible'
 const DATA_KEY = 'bs.navbarcollapsible'
@@ -92,6 +93,7 @@ class NavBarCollapsible extends BaseComponent {
 
     this._isShown = true
 
+    disablePageScroll()
     this._showElement()
   }
 
@@ -123,6 +125,7 @@ class NavBarCollapsible extends BaseComponent {
 
     this._element.classList.remove(CLASS_NAME_EXPANDED)
 
+    enablePageScroll()
     this._queueCallback(() => this._hideElement(), this._menuWrapper, isAnimated)
   }
 

src/js/plugins/util/pageScroll.js

@@ -0,0 +1,26 @@
+/**
+ * Prevents page scroll
+ */
+
+const CLASS_SCROLL_DISABLED = 'pagescroll-scroll-disabled'
+
+let disabled = false
+let currentScrollPos = document.scrollingElement.scrollTop
+const htmlContainer = document.querySelector('html')
+
+export function disablePageScroll() {
+  disabled = true
+  currentScrollPos = document.scrollingElement.scrollTop
+  htmlContainer.classList.add(CLASS_SCROLL_DISABLED)
+}
+
+export function enablePageScroll() {
+  disabled = false
+  htmlContainer.classList.remove(CLASS_SCROLL_DISABLED)
+}
+
+document.addEventListener('scroll', () => {
+  if (disabled) {
+    document.scrollingElement.scrollTop = currentScrollPos
+  }
+})

src/scss/bootstrap-italia-comuni.scss

@@ -170,6 +170,7 @@ $card-comuni-bg-dark: #2c2c2c;
 @import 'custom/images';
 @import 'custom/just-validate';
 @import 'custom/accessible-autocomplete';
+@import 'custom/page-scroll';
 
 // datepicker
 @import 'custom/form-datepicker';

src/scss/bootstrap-italia.scss

@@ -136,6 +136,7 @@
 @import 'custom/images';
 @import 'custom/just-validate';
 @import 'custom/accessible-autocomplete';
+@import 'custom/page-scroll';
 
 // datepicker
 @import 'custom/form-datepicker';

src/scss/custom/_page-scroll.scss

@@ -0,0 +1,3 @@
+.pagescroll-scroll-disabled {
+  scroll-behavior: auto !important;
+}