This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@aotearoan/angular-fullpage

Angular Fullpage Scroll

A pure Angular / Typescript component providing vertical responsive full page scrolling sections without the use of JQuery.

Requirements

• Angular (requires Angular 7.x or higher)
• Supports all major browsers and IE11 and up (lower versions might not be supported)

Features:

• Full page sections with smooth scrolling navigation.
• Mousewheel, arrow key, space (shift+space) navigation.
• Touch device support (swipe up, swipe down).
• Pointer device support (Edge on Surface).
• Automatically allows for scrolling within a section when the content is longer than the screen.
• Shorter sections can be specified which fit the content, not the full page height (e.g for a short footer).
• Ability to lock/unlock scrolling dynamically in code.

Installation

with npm:

npm install @aotearoan/angular-fullpage

with yarn:

yarn add @aotearoan/angular-fullpage

Usage

Import FullpageModule into the corresponding Module

import { FullpageModule } from '@aotearoan/angular-fullpage';

@NgModule({
  declarations: [
  ],
  imports: [
    FullpageModule,
  ],
  providers: [],
})
export class SomeModule { }

Import SectionModel into the corresponding Component

import { SectionModel } from '@aotearoan/angular-fullpage';

Create the full page configuration in the corresponding Component

  public sections: SectionModel = [
    {url: 'section-a', active: false, pageTop: true},
    {url: 'section-b', active: false},
    {url: 'section-c', active: false},
    {url: 'section-d', active: false},
  ];

  public sectionChange(url: string) {
    // TODO: implement
  }

• define url which is both the fullpage section element id and the url fragment set when navigating to a section.
• active is set by the fullpage component when the active section changes
• sectionChange is a callback which will notify you of a section change from within the component by emitting the new url/fragment. This can be useful when implementing a section navigation menu.
• pageTop set this to true for the top page section and navigation will not use the fragment e.g. the url will be / instead of /#section-a

Add the full page component to the template

<ao-fullpage [sections]="sections" (sectionChange)="sectionChange">
</ao-fullpage>

Add the page sections to the template by using the class fullpage-section and providing an id defined in the section model (the url in SectionModel)

<ao-fullpage [sections]="sections">
  <section class="fullpage-section" [id]="sections[0].url">
    <app-section [section]="sections[0]">
      <h1>A fullpage section</h1>
    </app-section>
  </section>
  <section class="fullpage-section" [id]="sections[1].url">
    <app-section [section]="sections[1]">
      <h1>A fullpage section with an input</h1>
      <form>
        <textarea rows="10" placeholder="Interaction with form controls should prevent keyboard scrolling"></textarea>
      </form>
    </app-section>
  </section>
  <section class="fullpage-section" [id]="sections[2].url">
    <app-section [section]="sections[2]">
      <h1>Another fullpage section</h1>
    </app-section>
  </section>
</ao-fullpage>

To make a the final section which is not full height but fits the content (e.g. a page footer), use the class fullpage-section-fit-content

  <section class="fullpage-section-fit-content" [id]="sections[3].url">
    <app-section [section]="sections[3]">
      <h1>A shorter fullpage section</h1>
    </app-section>
  </section>

Other options

lockScrolling

To dynamically lock the scrolling, i.e. prevent scrolling up or down to other sections use the boolean attribute lockScrolling

<ao-fullpage [lockScrolling]="true"></ao-fullpage>

scrollSensitivity

When rapidly scrolling with the mouse wheel a large number of events are generated in quick succession. These need to be consumed and discarded (prevent default) in order to ensure the user doesn't scroll through multiple sections at once. This is achieved by measuring the time between events. If this time is greater than the scrollSensitivity it indicates a pause between wheel events, i.e. a new user action. If not then the event is discarded.

This is configurable via the scrollSensitivity attribute. The default value is 125s which gives reasonable results, however the value can be adjusted lower to increase sensitivity at the risk of letting through too many scroll events or higher which may result in discarding new genuine user wheel events.