Namespace Pollution Mechanism
    Have ideas to improve npm?Join in the discussion! »

    ng-body-scroll-lock
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.2 • Public • Published

    Angular Body Scroll Lock

    This is an Angular library that implements the body-scroll-lock, which can have minor problems in an Angular Project. The Angular Body Scroll Lock purpose is to optimize and implements Angular features, but without changing the original script logic. Every change on the body-scroll-lock package will be synchronized in this project too.

    Install

    $ yarn add ng-body-scroll-lock
     
    or
     
    $ npm install ng-body-scroll-lock

    Usage

    Import Module/Service in your Module

    Import the NgBodyScrollLockModule in your module or import NgBodyScrollLockService in your providers.

    !!! Be aware that on some Angular versions it would not work importing the NgBodyScrollLockModule, in that case, you have to import the NgBodyScrollLockService in providers!

    Example with module
    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { RouterModule } from '@angular/router';
    import { NgBodyScrollLockModule } from 'ng-body-scroll-lock';
     
    import { NavigationBarComponent } from './navigation-bar.component';
    import { HamburgerIconComponent } from './hamburger-icon/hamburger-icon.component';
     
    @NgModule({
        imports:
        [
            CommonModule,
            RouterModule,
            NgBodyScrollLockModule
        ],
        declarations:
        [
            NavigationBarComponent,
            HamburgerIconComponent
        ],
        exports:
        [
            NavigationBarComponent
        ]
    })
    export class NavigationBarModule { }
    Example with service
    typescript
    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { RouterModule } from '@angular/router';
    import { NgBodyScrollLockService } from 'ng-body-scroll-lock';
     
    import { NavigationBarComponent } from './navigation-bar.component';
    import { HamburgerIconComponent } from './hamburger-icon/hamburger-icon.component';
     
    @NgModule({
        imports:
        [
            CommonModule,
            RouterModule
        ],
        declarations:
        [
            NavigationBarComponent,
            HamburgerIconComponent
        ],
        exports:
        [
            NavigationBarComponent
        ],
        providers: 
        [
            NgBodyScrollLockService
        ]
    })
    export class NavigationBarModule { }

    Import Service to use Body Scroll Lock

    Import the NgBodyScrollLockService where you want to use it

    Example
    import { Component, ViewChild, ElementRef } from '@angular/core';
    import { NgBodyScrollLockService } from 'ng-body-scroll-lock';
     
    @Component
    ({
        selector: 'navigation-bar',
        templateUrl: './navigation-bar-component.html',
        styleUrls: ['./navigation-bar-component.scss']
    })
    export class NavigationBarComponent {
     
        @ViewChild('verticalMenu', {static: true}) VerticalMenuRef: ElementRef;
        public isVerticalMenuOpen: boolean = false;
     
        constructor(private bodyScrollLock: NgBodyScrollLockService) {}
     
        public openVerticalMenu() {
            this.isVerticalMenuOpen = true;
            this.bodyScrollLock.DisableBodyScroll(this.VerticalMenuRef.nativeElement);
        }
     
        public closeVerticalMenu() {
            this.isVerticalMenuOpen = false;
            this.bodyScrollLock.EnableBodyScroll(this.VerticalMenuRef.nativeElement);
        }
    }

    Functions

    Function Arguments Return Description
    DisableBodyScroll targetElement: HTMLElement, options: BodyScrollOptions void Disables body scroll while enabling scroll on target element
    EnableBodyScroll targetElement: HTMLElement void Enables body scroll and removing listeners on target element
    ClearAllBodyScrollLocks null void Clears all scroll locks

    Install

    npm i ng-body-scroll-lock

    DownloadsWeekly Downloads

    17

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    243 kB

    Total Files

    28

    Last publish

    Collaborators

    • avatar