CODEWITHSUNDEEP
angulartypescript
Raza Ellahi
Raza Ellahi

Reputation: 63

How to check scroll bottom position in angular

I m implementing two button on angular web page that moves to most top and bottom of the page. but I want to handle a scenario that when user is already on most top then button to move "up" should be hide and vise versa, so for this case I found a function from google that hides my button when user on something 1000 from the top scroll.

ts: 

   window.onscroll = function() {scrollFunction()};

   function scrollFunction() {

  if (document.body.scrollTop > 1000 || 
    document.documentElement.scrollTop > 1000) {
    document.getElementById("myBtnUp").style.display = "block";
   } else {
    document.getElementById("myBtnUp").style.display = "none";
   }

     }

HTML:

 <button id="myBtnUp">move up</button>

 <button id="myBtnDown">move Down</button>

that works fine but when user is on most bottom of the page then in that case second button should be hide but i can't find any control like

    document.body.scrollBottom > 1000 or
    document.documentElement.scrollBottm > 1000

Upvotes: 0

Views: 464

Answers (1)

Rochak
Rochak

Reputation: 28

Use Hostlistener at window to track the scroll events.

https://stackblitz.com/edit/angular-e4qksa?file=src/app/app.component.ts

Upvotes: 1

Related Questions