Socket
Socket
Sign inDemoInstall

ngx-page-scroll

Package Overview
Dependencies
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-page-scroll - npm Package Compare versions

Comparing version 8.0.0 to 9.0.0

index.d.ts

2

lib/ngx-page-scroll.directive.d.ts

@@ -33,3 +33,3 @@ import { EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';

static ɵfac: i0.ɵɵFactoryDeclaration<NgxPageScrollDirective, [null, { optional: true; }, null]>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NgxPageScrollDirective, "[pageScroll]", never, { "routerLink": "routerLink"; "href": "href"; "fragment": "fragment"; "pageScrollTarget": "pageScrollTarget"; "pageScrollHorizontal": "pageScrollHorizontal"; "pageScrollOffset": "pageScrollOffset"; "pageScrollDuration": "pageScrollDuration"; "pageScrollSpeed": "pageScrollSpeed"; "pageScrollEasing": "pageScrollEasing"; "pageScrollInterruptible": "pageScrollInterruptible"; "pageScrollInView": "pageScrollInView"; "pageScrollAdjustHash": "pageScrollAdjustHash"; "pageScroll": "pageScroll"; }, { "pageScrollFinish": "pageScrollFinish"; }, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NgxPageScrollDirective, "[pageScroll]", never, { "routerLink": "routerLink"; "href": "href"; "fragment": "fragment"; "pageScrollTarget": "pageScrollTarget"; "pageScrollHorizontal": "pageScrollHorizontal"; "pageScrollOffset": "pageScrollOffset"; "pageScrollDuration": "pageScrollDuration"; "pageScrollSpeed": "pageScrollSpeed"; "pageScrollEasing": "pageScrollEasing"; "pageScrollInterruptible": "pageScrollInterruptible"; "pageScrollInView": "pageScrollInView"; "pageScrollAdjustHash": "pageScrollAdjustHash"; "pageScroll": "pageScroll"; }, { "pageScrollFinish": "pageScrollFinish"; }, never, never, false>;
}
{
"name": "ngx-page-scroll",
"version": "8.0.0",
"version": "9.0.0",
"description": "Convenience directive for animated scrolling functionality for angular written in pure typescript",

@@ -27,5 +27,5 @@ "keywords": [

"peerDependencies": {
"ngx-page-scroll-core": "8.0.0",
"@angular/common": "^13.0.0",
"@angular/core": "^13.0.0"
"ngx-page-scroll-core": "9.0.0",
"@angular/common": "^14.0.0",
"@angular/core": "^14.0.0"
},

@@ -40,3 +40,3 @@ "dependencies": {

"fesm2015": "fesm2015/ngx-page-scroll.mjs",
"typings": "ngx-page-scroll.d.ts",
"typings": "index.d.ts",
"exports": {

@@ -47,3 +47,3 @@ "./package.json": {

".": {
"types": "./ngx-page-scroll.d.ts",
"types": "./index.d.ts",
"esm2020": "./esm2020/ngx-page-scroll.mjs",

@@ -50,0 +50,0 @@ "es2020": "./fesm2020/ngx-page-scroll.mjs",

@@ -15,8 +15,8 @@ # ngx-page-scroll [![npm version](https://img.shields.io/npm/v/ngx-page-scroll.svg?style=flat)](https://www.npmjs.com/package/ngx-page-scroll) [![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)

- flexible: trigger scroll animations after component load, server response, etc.
- easy-to-use directive: scroll to an element referenced in the href-attribute
- easy-to-use directive: scroll to an element referenced in the href-attribute
(`href="#mytarget`) just by adding `pageScroll` directive
- customizable: adjust duration, offset or whether scrolling stops if the user interrupts
- customizable: adjust duration, offset or whether scrolling stops if the user interrupts
([read more](https://github.com/Nolanus/ngx-page-scroll/wiki/Scroll-Interruption-Interference))
- use custom easing functions to calculate the scroll position over time
- works across routes (scrolls to target element as soon as the
- works across routes (scrolls to target element as soon as the
routing has finished) and in both directions (horizontal/vertical)

@@ -51,4 +51,5 @@

| -------------------------------------------- | -------------------------- | -------------------------------------------------------------------------- |
| v8.x | v13 | [README](README.md) |
| v7.x | v12, v11, v10, v9, v8 | [README](README.md) |
| v9.x | v14 | [README](README.md) |
| v8.x | v13 | [README](https://github.com/Nolanus/ngx-page-scroll/blob/v8.0.0/README.md) |
| v7.x | v12, v11, v10, v9, v8 | [README](https://github.com/Nolanus/ngx-page-scroll/blob/v7.0.6/README.md) |
| v6.x | v8, v7 | [README](https://github.com/Nolanus/ngx-page-scroll/blob/v6.0.2/README.md) |

@@ -94,3 +95,3 @@ | v5.x | v6 | [README](https://github.com/Nolanus/ngx-page-scroll/blob/v5.0.1/README.md) |

}
ngOnInit(): void {

@@ -103,6 +104,6 @@ this.pageScrollService.scroll({

}
```
```
Note: The `scroll()` method is a shorthand from creating a `PageScrollInstance` (an object encapsulating all information
relevant for performing a scroll animation) using `PageScrollService#create` and starting it using
Note: The `scroll()` method is a shorthand from creating a `PageScrollInstance` (an object encapsulating all information
relevant for performing a scroll animation) using `PageScrollService#create` and starting it using
the `PageScrollService#start` method.

@@ -127,4 +128,4 @@

For ease of use a directive `pageScroll` exists, which allows you to quickly add scroll animations to your angular app by
adding a property to your existing HTML a-tags. It can also work cross-routes, meaning it will start the scroll animation
For ease of use a directive `pageScroll` exists, which allows you to quickly add scroll animations to your angular app by
adding a property to your existing HTML a-tags. It can also work cross-routes, meaning it will start the scroll animation
after the target route has been loaded.

@@ -155,7 +156,7 @@ It utilizes the ngx-page-scroll-core module for that, thus requires it as a peer dependency.

### Usage
### Usage
In your template you may add the `pageScroll` attribute to elements with an `href` attribute pointing towards an id on
In your template you may add the `pageScroll` attribute to elements with an `href` attribute pointing towards an id on
the same page (e.g. `#theId`). The `onClick` event will be interrupted and the scroll animation starts.
Alternatively you may set the optional `pageScrollTarget` property to a valid css selector to specify the
Alternatively you may set the optional `pageScrollTarget` property to a valid css selector to specify the
target element to scroll to.

@@ -180,4 +181,4 @@

Additional attributes may be set on an DOM element using the `pageScroll` directive for customization.
They take precedence over the default settings specified in `PageScrollConfig` class. Thereby it is
possible to have all page scroll-animations last e.g. 2 seconds, but a specific one should be performed with a custom easing function and a duration
They take precedence over the default settings specified in `PageScrollConfig` class. Thereby it is
possible to have all page scroll-animations last e.g. 2 seconds, but a specific one should be performed with a custom easing function and a duration
of only 1 second.

@@ -194,3 +195,3 @@

| `pageScrollDuration` | number | 1250 | Duration in milliseconds the whole scroll-animation should last.
| `pageScrollSpeed` | number | - | Speed in Pixel/Second the animation should take. Only applied if no duration is set.
| `pageScrollSpeed` | number | - | Speed in Pixel/Second the animation should take. Only applied if no duration is set.
| `pageScrollInView` | boolean | true | Whether the scroll animation should happen even when the scroll target is already inside the view port (`true`). Set to `false` to skip scroll animation if target is already in view.

@@ -209,6 +210,6 @@ | `pageScrollInterruptible` | boolean | true | Whether the scroll animation should stop if the user interferes with it (`true`) or not (`false`).

The following example will check whether the route _Home_ is currently loaded.
If this is true, the scroll-animation will be performed with the default
properties. If a different route is loaded, a subscription for route changes
will be made and the scroll-animation will be performed as soon as the new
The following example will check whether the route _Home_ is currently loaded.
If this is true, the scroll-animation will be performed with the default
properties. If a different route is loaded, a subscription for route changes
will be made and the scroll-animation will be performed as soon as the new
route is loaded.

@@ -220,3 +221,3 @@

Overriding all possible properties. `doSmth()` and `myEasing` are
Overriding all possible properties. `doSmth()` and `myEasing` are
defined in the component

@@ -240,3 +241,3 @@

}
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;

@@ -243,0 +244,0 @@ }

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc