Angular Fullpage Scroll
A pure Angular / Typescript component providing vertical responsive full page scrolling sections without the use of JQuery.
- Angular (requires Angular 7.x or higher)
- Supports all major browsers and IE11 and up (lower versions might not be supported)
- 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.
npm install @aotearoan/angular-fullpage
yarn add @aotearoan/angular-fullpage
Import FullpageModule into the corresponding Module
Import SectionModel into the corresponding Component
Create the full page configuration in the corresponding Component
public sections: SectionModel =;public sectionChangeurl: string
- 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
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)
A fullpage sectionA fullpage section with an inputAnother fullpage section
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
A shorter fullpage section
To dynamically lock the scrolling, i.e. prevent scrolling up or down to other sections use the boolean attribute lockScrolling
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.