README
NOTE
This package is moving over to new location @kubadospial/ngx-positioner
ngx-positioner
If You want to use smooth scroll top/bottom on DOM element or check if element is at the bottom of scrollable element? Keep on reading!
ngx-positioner is an Angular 6+ directive which allows to determin position of scrollable DOM element. So basicly the directive tells if scrollable element is scrolled top/bottom. Additionaly You can move to bottom/top element using smooth scroll or instant scroll.
Note
Update:
You can control speed of moveToTop / moveToBottom by declaring number for both separately:
settings.smoothScroll.moveToTopSpeed = number / settings.smoothScroll.moveToBottomSpeed = number
Service variable "initialSettings" is deprecated and in future it will remain but it won't be accesable.
Instead use "settings" variable.
---------------------------------------------------------------------------------------------------
Directive requires Rxjs version >= 6.0.0.
Full browser compatibility.
Demo
Check the link
Usage
Install ngx-positioner
- npm:
$ npm install ngx-positioner
- yarn:
$ yarn add ngx-positioner
import NgxPositionerModule
import { NgxPositionerModule } from 'ngx-positioner';
@NgModule({
declarations: [...],
imports: [
...
NgxPositionerModule
],
providers: []
})
Use NgxPositionerDirective
import { Settings } from 'ngx-positioner';
@Component(...)
export class SomeComponent {
...
positionerSettings: Settings = {
smoothScroll: {
moveToTop: true,
moveToBottom: true
}
};
onScrolledToTop(isTop: boolean) {
this.isScrolledToTop = isTop;
}
onScrolledToBottom(isBottom: boolean) {
this.isScrolledToBottom = isBottom;
}
moveToTop() {
this.moveToTop$.next();
}
moveToBottom() {
this.moveToBottom$.next();
}
}
And
<div class="panel">
...
<div (click)="moveToTop()">move to top</div>
<div (click)="moveToBottom()">move to bottom</div>
</div>
<div
class="parent"
ngxPositioner
(isScrolledToTop)="onScrolledToTop($event)"
(isScrolledToBottom)="onScrolledToBottom($event)"
[settings]="positionerSettings"
[moveToTop$]="moveToTop