How to check scroll bottom position in angular

Question

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

Rochak · Accepted Answer · 2019-02-14 10:15:01Z

1

Use Hostlistener at window to track the scroll events.

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

answered Feb 14, 2019 at 10:15

Rochak

283 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Raza Ellahi Over a year ago

It is best, but when at the center of the page I want to display both the buttons

Collectives™ on Stack Overflow

How to check scroll bottom position in angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related