🐛 fix(core, modal): décalage scrollbar à l'ouverture/fermeture modale…

… & fix scroll behavior [DS-3048,DS-3054] (#519)

Lorsque la page est scrollable, un décalage se produit à l'ouverture d'une modal (la page étant figé elle n'est plus scrollable).

Une marge est donc appliquée à l'ouverture de la modale pour simuler la barre de scroll et ainsi éviter le mouvement du contenu en arrière plan.

src/component/modal/style/_module.scss

@@ -21,6 +21,7 @@
   @include margin(0);
   @include display-flex(column, stretch, space-between);
   @include fixed(0, 0, 0, 0, 100%, 100%);
+  @include padding-right(var(--scrollbar-width));
   // transition in/out
   transition: opacity 0.3s, visibility 0.3s;
 

src/core/script/api/modules/scroll/scroll-locker.js

@@ -18,8 +18,14 @@ class ScrollLocker extends Module {
     if (!this._isLocked) {
       this._isLocked = true;
       this._scrollY = window.scrollY;
+      const scrollBarGap = window.innerWidth - document.documentElement.clientWidth;
       document.documentElement.setAttribute(ns.attr('scrolling'), 'false');
-      document.body.style.top = `${this._scrollY * -1}px`;
+      document.body.style.top = `${-this._scrollY}px`;
+      this.behavior = getComputedStyle(document.documentElement).getPropertyValue('scroll-behavior');
+      if (this.behavior === 'smooth') document.documentElement.style.scrollBehavior = 'auto';
+      if (scrollBarGap > 0) {
+        document.documentElement.style.setProperty('--scrollbar-width', `${scrollBarGap}px`);
+      }
     }
   }
 
@@ -29,13 +35,15 @@ class ScrollLocker extends Module {
       document.documentElement.removeAttribute(ns.attr('scrolling'));
       document.body.style.top = '';
       window.scrollTo(0, this._scrollY);
+      if (this.behavior === 'smooth') document.documentElement.style.removeProperty('scroll-behavior');
+      document.documentElement.style.removeProperty('--scrollbar-width');
     }
   }
 
   move (value) {
     if (this._isLocked) {
       this._scrollY += value;
-      document.body.style.top = `${this._scrollY * -1}px`;
+      document.body.style.top = `${-this._scrollY}px`;
     } else {
       window.scrollTo(0, window.scrollY + value);
     }

src/core/style/display/module/_no-scroll.scss

@@ -6,12 +6,19 @@
 /**
 * Fixe le scroll en arrière plan
 */
-// TODO: transformer en attribut ?
-:root#{ns-attr(scrolling)} body {
-  overflow: hidden;
-  bottom: 0;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
+:root {
+  --scrollbar-width: 0;
+
+  body {
+    border-right: var(--scrollbar-width) solid transparent;
+  }
+
+  &#{ns-attr(scrolling)} body {
+    overflow: hidden;
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+  }
 }