Currently, I am using Puppeteer to scrape Slack. My goal is to confirm whether I have scrolled to the very top of the channel feed.
The issue arises because the channel feed does not actually scroll, making it impossible for me to utilize the method outlined on MDN:
element.scrollHeight - Math.abs(element.scrollTop) === element.clientHeight
In a scenario where the element itself does not scroll but its child elements overflow, the suggestion is to inspect the computed style:
window.getComputedStyle(element).overflowY === 'visible'
However, this solution does not seem to work for two reasons. Firstly, in this particular case, it appears that the overflow hidden property is set on another parent container, causing the container I'm observing to always have a computed overflowY style of visible. Secondly, when I am scrolled all the way to the top, the child elements will by nature overflow downwards rather than upwards.
So, the question remains: how can I validate if a container overflows specifically at the top?
If you wish to test your code on the specific element I am examining within the Slack App, simply log into a Slack workspace and select that element using the console with:
document.querySelector(`[aria-label="${channelName} (channel)"]`)
Replace channelName with something like 'general' or the name of the active channel currently displaying its feed.