ScrollHere

Scrolls specified container to the element with this directive when it's condition becomes truthy.

Installation

npm install @kovalenko/scroll-here

Supported API

Properties

| @Input() | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | ngcScrollHere | boolean | required | | Sets condition when to start scrolling | ngcScrollContainer | string / HTMLElement | optional | 'html' | Place this attribute BEFORE [ngcScrollHere] in template. Should get a html element or css selector for a scrollable element; window will be used if this attribute is empty | ngcScrollDuration | number | optional | 200 | Sets the scroll duration

Events

| @Output() | Type | Event Type | Required | Description | | --- | --- | --- | --- | --- | | ngcScrollTriggered | EventEmitter | void | optional | this will callback if start scrolling condition has been met | ngcScrollFinished | EventEmitter | void | optional | this will callback if scrolling has been finished

Usage

First, import the ScrollHereModule to your module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScrollHereModule } from '@kovalenko/scroll-here';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app';

@NgModule({
  imports: [BrowserModule, ScrollHereModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

In this example, window will be scrolled to inner div and when ngcScrollFinished callback will be invoked the window will be scrolled to outer div

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <div style="padding-top: 3000px" [ngcScrollHere]="toTop" [ngcScrollDuration]="4000">
      <div [ngcScrollHere]="!triggered && s" [ngcScrollDuration]="2000" (ngcScrollTriggered)="triggered = true" (ngcScrollFinished)="toTop = true">Bottom</div>
    </div>
  `,
})
export class AppComponent {
  s = true;
  triggered = false;
  toTop = false;
}

License

MIT