Scrollbar gutter component

This provides an API and adds a --scrollbar-gutter custom property to the <html> element with the detected thickness of the scrollbar, which is updated lazily on viewport resize. This is based on a technique by David Walsh, as demonstrated in this JSFiddle. Once the scrollbar-gutter CSS property is supported in all major browsers, this component may become unnecessary.

Definition

id: scrollbar_gutter
title: 'Scrollbar gutter'
description: "This provides an API and adds a --scrollbar-gutter custom property to the <html> element with the detected thickness of the scrollbar, which is updated lazily on viewport resize. This is based on a technique by David Walsh, as demonstrated in this JSFiddle. Once the scrollbar-gutter CSS property is supported in all major browsers, this component may become unnecessary."
class: Drupal\ambientimpact_ux\Plugin\AmbientImpact\Component\ScrollbarGutter
provider: ambientimpact_ux

Configuration

{  }

Libraries

component.scrollbar_gutter:
  js:
    components/scrollbar_gutter/scrollbar_gutter.js:
      attributes:
        defer: true
  dependencies:
    - ambientimpact_core/component.event.lazy_resize
    - ambientimpact_core/component.fastdom
    - ambientimpact_core/framework