Scroll Interruption Interference

Using the pageScrollInterruptible attribute or the service configuration PageScrollConfig.interruptible one can adjust whether user interactions should stop a running scroll animation. The detection is enabled by default. Whenever the user performs scroll related events (usage of mouse wheel or arrow keys) or events that indicate attempts to stop the scrolling (mouse click), the page scroll animation stops.

Example

Attribute

<a href=".scrollHere" pageScroll [pageScrollinterruptible]="false">Go somewhere</a>

Service configuration

PageScrollCoreModule.forRoot({interruptible: false, ...})

Technical implementation

To detect user interactions while a page scroll animation is running, event listeners are attached to the body element, listening for common events related to scrolling like mouse wheel, arrow keys or clicks (you may see the whole list in the code). Once the page scroll animation finishes the event listener are detached/removed. You may subscribe to the event emitter pageScrollFinish to execute custom logic whenever the scroll animation stops. Using the emitted boolean value you can distinguish between animations that finished due to reaching their target (value true is emitted) or because a user interruption (false is emitted).