VideosMy ProjectsProgramming BlogGallery
  1. Home
  2. Blog
  3. Calculate the remaining scroll distance in Angular
Programming Blog

Atom/RSS Feed


Calculate the remaining scroll distance in Angular


To Calculate the remaining scrollbar distance in Angular you need to perform some simple calculations on various window and document variables.

1. Inject window and document

       @Inject('Window') window: Window,
       @Inject('Document') document: Document
   ) {

2. Listen to the scroll event

window.addEventListener('scroll', () => {
           const scrollRemainder = (document.documentElement.scrollHeight - (window.pageYOffset + window.innerHeight));
           console.log('remaining scroll px: ', scrollRemainder)

Worth noting

If Angular complains that there is no provider for Window and/or Document then you need to add the provider to the @NgModule.

For Example

   declarations: [
   imports: [
   providers: [
       { provide: 'Window', useValue: window }, // add the provider
       { provide: 'Document', useValue: document } // add the provider
   bootstrap: [
       // snip
Join my mailing list