'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.

javascriptcssiosscrollwebkit


Solution 1:[1]

It looks like the overlay of #bottom-float-menu over the main content is running into scroll issues.

Try to block the main content when user clicks "Place Order" by styling your <body> tag with overflow: hidden.

For more insights about styling a modal (like your menu), check out this article from CSS Tricks, including the first thread of comments.

Solution 2:[2]

 // it do not act like the original scroll up.
 // if someone has a better solution, please tell me.
 // detect Ios, add listener to the element, scroll up manually
 fixScrollUp(el) {
    let startY = 0;
    let endY = 0;
    let delta = 0;
    el.addEventListener('touchstart', (e) => {
        startY = e.touches[0].pageY;
    });
    el.addEventListener(
        'touchmove',
        (e) => {
            endY = e.touches[0].pageY;
            delta = endY - startY;
            startY = endY;
            // if the user try to scroll up and the element have not reach the top
            if (delta > 0 && el.scrollTop > 0) {
                el.scrollTop = el.scrollTop - delta;
            }
        },
        { passive: false }
    );
},

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 mzs

Related Questions