Webkit - Cannot Scroll Up Without First Scrolling Down

I ran into this odd bug on Webkit browsers where if a user attempts to scroll up in my div, they are unable to do so, without first scrolling down - if the user is at the bottom of the div they are not able to scroll up at all. More details and a video can be found on this issue: https://github.com/manufont/react-swipeable-bottom-sheet/issues/21?_pjax=%23js-repo-pjax-container

I'm not sure what the exact cause of this issue is, but I'm trying to implement a solution where I intercept the scroll event, and if the user is attempting to scroll up - I first scroll down one pixel and then allow the user to scroll up. I added the onScroll handler to my component and have the following code:

const handleScroll = e => {
    const element = e.target;
    element.scrollTo(0, element.scrollTop + 1);
    if (element.scrollHeight - element.scrollTop === element.clientHeight) {
        // do something at end of scroll
        console.log('END OF SCROLL');
        element.scrollTo(0, element.scrollTop - 1);
    }
};

In this code I'm always scrolling down one pixel, but the problem is I'm unable to detect the direction of scroll - I looked at various solutions which do this, including this one: https://stackoverflow.com/a/62497293/4909000 and https://stackoverflow.com/a/50412319/4909000 but neither of them worked for me - currentTarget.scrollY was undefined and the hook solution randomly printed scrolling down and didn't seem to work at all.

from Webkit - Cannot Scroll Up Without First Scrolling Down