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?
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>