I'm scraping Slack using Puppeteer. I want to verify if I've scrolled to the top of channel feed.
The problem is the channel feed doesn't scroll, so I cannot use the method documented on MDN:
element.scrollHeight - Math.abs(element.scrollTop) === element.clientHeight
For my case where the element doesn't scroll but has overflowing children, they suggest to check the computed style:
window.getComputedStyle(element).overflowY === 'visible'
However that doesn't work, I believe for two reasons. First, in this case it looks like the overflow hidden is set to another parent container, so the container I'm looking at always has a computed overflowY style set to visible. Second, the children elements will always overflow in the Y direction if I'm scrolled all the way up to the top (if I'm at the top, they overflow at the bottom).
So, how do I verify if a container overflows at the top and only at the top?
If you want to check your code on the specific element I'm trying to check the Slack App, you login to a Slack workspace and select that element in the console with:
document.querySelector(`[aria-label="${channelName} (channel)"]`)
Where channelName is something like 'general' or whatever is the name of the active channel that has it's feed displayed.
Finally, I found a solution that does the job. I grab the channel feed container and check the position of it's top edge relative to the viewport. If it's negative, then it means there is still more to scroll.
const channelFeed = document.querySelector(`[aria-label="${channelName} (channel)"]`)
const isScrolledToTop = channelFeed.getBoundingClientRect().y > 0
This works since the channel feed container doesn't scroll. It's containing elements (the posts) and it's full length exists on the page, except the overflow is hidden at the top and bottom. That means I can check if the top edge is still overflowing off the viewport.