Scroll blocker component

Provides an API to temporarily prevent scrolling the viewport or a scrollable element when one or more blocking elements are provided. Layout shifting due to removal of scrollbars on platforms where they take up space is prevented using the scrollbar gutter component. The primary use-case for this is with overlays and other modal elements.

Definition

id: scroll_blocker
title: 'Scroll blocker'
description: 'Provides an API to temporarily prevent scrolling the viewport or a scrollable element when one or more blocking elements are provided. Layout shifting due to removal of scrollbars on platforms where they take up space is prevented using the scrollbar gutter component. The primary use-case for this is with overlays and other modal elements.'
class: Drupal\ambientimpact_ux\Plugin\AmbientImpact\Component\ScrollBlocker
provider: ambientimpact_ux

Configuration

{  }

Libraries

component.scroll_blocker:
  css:
    component:
      components/scroll_blocker/scroll_blocker.css: {  }
  js:
    components/scroll_blocker/scroll_blocker.js:
      attributes:
        defer: true
  dependencies:
    - ambientimpact_core/component.fastdom
    - ambientimpact_ux/component.scrollbar_gutter
    - ambientimpact_core/framework