Whenever user scroll to the bottom, we can show Go to top button to make user reached to top of the page. This program will help you to find out bottom of the page.
Source Code          DEMO

Program Flow

  1. Bind scroll event to window
  2. Calculate whole document height
  3. Get height of the window
  4. Calculate bottom of window
  5. If window bottom is greater than or equal to document height then user reached to bottom

Script - app.component.ts

Observe below window.onscroll event. Here NgZone dependency used for updating template 
import { Component } from '@angular/core';
import { NgZone } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <div style="position:fixed;top:0px;padding:10px;border:1px solid #ccc;color:red">Status :  <strong>{{statusText}}</strong> </div>
  <div style="height:1000px;padding:10px;border:1px solid #ccc;">
  Scroll to the bottom and find the alert
  </div>
  <br/>
  <h3>bottom</h3>
  `
})
export class AppComponent {
  statusText: string = "not reached";

  constructor(lc: NgZone) {
     window.onscroll = () => {
         let status = "not reached";
         let windowHeight = "innerHeight" in window ? window.innerHeight
             : document.documentElement.offsetHeight;
         let body = document.body, html = document.documentElement;
         let docHeight = Math.max(body.scrollHeight,
             body.offsetHeight, html.clientHeight,
             html.scrollHeight, html.offsetHeight);
         let windowBottom = windowHeight + window.pageYOffset;
         if (windowBottom >= docHeight) {
           status = 'bottom reached';
         }
         lc.run(() => {
           this.statusText = status;
         });
      };
  }
}

7 comments:

Blogroll

Popular Posts