scrollbar-compensate.js

// ==============================================================
// Compensates the scrollbar width on fixed-position elements
// ==============================================================

class ScrollbarCompensate {
  constructor() {
    this.itemsToCompensate = [
      document.querySelector('body'),
      document.querySelector('.menu-btn-container'),
    ];
    this.scrollbarWidth = sessionStorage.getItem('scrollbarwidth');
    if (!this.scrollbarWidth) {
      this.calculateScrollWidth();
    }
  }

  calculateScrollWidth() {
    const measureDummy = document.createElement('div');
    const style = {
      width: '50px',
      height: '50px',
      position: 'absolute',
      bottom: '0',
      right: '0',
      'overflow-y': 'scroll',
      'z-index': '-1',
      visibility: 'hidden',
    };
    Object.assign(measureDummy.style, style);
    document.documentElement.appendChild(measureDummy);
    this.scrollbarWidth = measureDummy.offsetWidth - measureDummy.clientWidth;
    sessionStorage.setItem('scrollbarwidth', this.scrollbarWidth);
    document.documentElement.removeChild(measureDummy);
  }

  setCompensation(width) {
    if (width !== 0) {
      width += 'px';
    }
    this.itemsToCompensate.forEach(element => {
      if (element) {
        element.style.marginRight = width;
      }
    });
  }

  compensate() {
    if (this.scrollbarWidth !== 0) {
      this.setCompensation(this.scrollbarWidth);
    }
  }

  reset() {
    this.setCompensation(0);
  }
}

export const scrollbarCompensate = new ScrollbarCompensate();