Dynamically calculate scrollbar width

Author: Htbaa

CHANGELOG.md

@@ -1,3 +1,5 @@
+- In de vorige versies werd bij het openen van het feature modal een standaard `padding-right` van `17px` op de `body` class toegepast (`body.gh-dim-modal-open`) om de ruimte te compenseren voor het verwijderen van de browser scrollbar. Deze waarde kan echter verschillen per scherm en device en wordt daarom nu dynamisch bepaald en wordt direct toegepast op `body.style.paddingRight`. Mogelijk heeft dit invloed op eigen styling.
+
 **1.10.11 (2023-11-28)**
 
 - Nieuwe versies van ondersteunende software bibliotheken in gebruik genomen.

src/components/feature.js

@@ -14,6 +14,7 @@
 import React, {Component} from 'react';
 import {CSSTransition} from 'react-transition-group';
 import _ from 'lodash';
+import { getScrollbarWidth } from '../util/browser';
 import { FEATURE_TYPE_WMSFEATURE, FEATURE_TYPE_KMLFEATURE, FEATURE_TYPE_DIMFEATURE, FEATURE_TYPE_UNKNOWN } from '../constants';
 
 function CloseModal({ onClick }) {
@@ -135,13 +136,15 @@ export default class FeatureComponent extends Component {
     componentDidUpdate(prevProps) {
         if(this.props.feature !== null) {
             document.body.classList.add('gh-dim-modal-open');
+            document.body.style.paddingRight = getScrollbarWidth() + 'px';
             if(typeof this.props.cb === 'function') {
                 this.refModal.current.focus();
                 this.props.cb(this.props.feature);
             }
         }
         else {
             document.body.classList.remove('gh-dim-modal-open');
+            document.body.style.paddingRight = null;
         }
 
         // Close modal when Escape is pressed

src/scss/style.scss

@@ -427,7 +427,6 @@ $shadow-color: rgba(0, 0, 0, 0.5);
 
 body.gh-dim-modal-open {
     overflow:hidden;
-    padding-right:17px;
 }
 
 .gh-dim-feature-modal {

src/util/browser.js

@@ -0,0 +1,42 @@
+/*
+* Copyright 2020-2023 Gemeente Heerenveen
+*
+* Licensed under the EUPL, Version 1.2 or – as soon they will be approved by the European Commission - subsequent versions of the EUPL (the "Licence");
+* You may not use this work except in compliance with the Licence.
+* You may obtain a copy of the Licence at:
+*
+* https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+*
+* Unless required by applicable law or agreed to in writing, software distributed under the Licence is distributed on an "AS IS" basis,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the Licence for the specific language governing permissions and limitations under the Licence.
+*/
+
+/**
+  * Calculate width of scrollbar
+ * 
+ * Source: https://stackoverflow.com/a/16771535
+ * @returns {int} Width of scrollbar in pixels
+ */
+const _getScrollbarWidth = () => {
+    let width = _getScrollbarWidth.width;
+    if (width === undefined) {
+        let div = document.createElement('div');
+        div.innerHTML = '<div style="width:50px;height:50px;position:absolute;left:-50px;top:-50px;overflow:auto;"><div style="width:1px;height:100px;"></div></div>';
+        div = div.firstChild;
+        document.body.appendChild(div);
+        width = _getScrollbarWidth.width = div.offsetWidth - div.clientWidth;
+        document.body.removeChild(div);
+    }
+    return width;
+};
+
+/**
+  * Calculate width of scrollbar
+ * 
+ * Source: https://stackoverflow.com/a/16771535
+ * @returns {int} Width of scrollbar in pixels
+ */
+export function getScrollbarWidth() {
+    return _getScrollbarWidth();
+}