How to detect if page is scrollable in Angular

Question

I am new to Angular and I made an app using angular material stepper that has some steps and some steps have longer content and so the page becomes scrollable. So I am looking for a way to detect if a page or its content is bigger than screen height so I could show a "Scroll Down" image or animation. If it is not scrollable, I don't want to show that animation.

I know that on the right a scroll bar appears, but I want to add this anyway. How do I approach resolving this issue?

Does this answer your question? Angular - Button Scroll to Top — Nik
– Nik, Commented Jul 4, 2022 at 8:09
You can create a directive that will hold the element reference and then make some mathematic logic for the scroll bar using the height of your container. does this answer your question? — Kishan Vaishnani
– Kishan Vaishnani, Commented Jul 4, 2022 at 8:16
add an intersection observer to the footer (or one other element at the bottom of the page) If it is not intersecting, it means it can be scrolled into view. — cloned
– cloned, Commented Jul 4, 2022 at 8:50
@PK2995 Yes this is something that I'm looking for but the accepted answer isn't working for me — weinde
– weinde, Commented Jul 15, 2022 at 7:28

IT goldman · Accepted Answer · 2022-07-04 10:16:26Z

0

You can compare the document scroll height vs the window height.

setInterval(function() {
  console.log(x = document.documentElement.clientHeight);
  console.log(y = document.body.scrollHeight);
  console.log("document has scroll: ", y > x)
}, 1000)

<div style="height: 600px">
 a div... go to full page and scroll will be gone
</div>

answered Jul 4, 2022 at 10:16

IT goldman

20.4k2 gold badges18 silver badges34 bronze badges

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

1 Comment

weinde Over a year ago

Sorry but this is not what I'm looking for

Collectives™ on Stack Overflow

How to detect if page is scrollable in Angular

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related