Prevents scrolling on the document body when enabled
CngxScrollLock
DirectivePrimaryv0.1.0
projects/common/layout/scroll/scroll-lock.directive.ts
Import#
import { CngxScrollLock } from '@cngx/common/layout'
Description#
Prevents scrolling on the document body when enabled.
Sets overflow: hidden and scrollbar-gutter: stable on <html> to
prevent layout shift when the scrollbar disappears. Restores original
values when all lock instances are released.
Multiple instances are ref-counted - the original styles are only restored when the last lock is released.
With a drawer
<div cngxDrawer #drawer="cngxDrawer" [cngxScrollLock]="drawer.opened()">
…
</div>With a modal
<div [cngxScrollLock]="isModalOpen()">…</div>