Prevent Scroll Directive

Overview

When applied to an HTML element, the prevent scroll directive stops propagation of mouse wheel and keyboard events for any elements outside the focused element. The intent is that if you have multiple elements on your MPage that contain mousewheel and keyboard navigation, that navigation will be ignored during the time the user is focused on the element containing the prevent scroll directive.

Required Imports

To use the button directive in your component, you must import the ButtonDirective from @clinicaloffice/mpage-developer and include it in your component imports array in your component TypeScript file.

e.g. your-component.ts

import {PreventScrollDirective} from '@clinicaloffice/mpage-developer';

@Component({
  selector: 'your-component',
  imports: [PreventScrollDirective],
  templateUrl: './your-component.component.html',
  styleUrl: './your-component.component.scss',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent {
}

Usage

To use the prevent scroll directive, apply it to an HTML element.

<div class="flex flex-gap" coPreventScroll>