1

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.

Alk
  • 5,215
  • 8
  • 47
  • 116
  • The video link is broken. Can you provide a fresh video and a minimum reproducible on [codesandbox](https://codesandbox.io/s/)? – the Hutt Feb 22 '22 at 05:11
  • @onkarruikar you should be able to reproduce a similar issue here: https://mysterious-shore-47382.herokuapp.com/restaurants/18/menu. Just add a few items to the order and click on “Place Order” to open the swipeable bottom sheet. If you try to scroll all the day down, and then scroll up on an iPhone, you’ll notice its impossible - this issue doesn’t occur on MacOS (Safari or Chrome) though. – Alk Feb 22 '22 at 09:45

2 Answers2

0

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.

Felipe Saldanha
  • 1,087
  • 8
  • 17
  • is there a specific part of the tutorial you're referring to? Happy to give you the bounty if you can provide me with a more specific solution / code example I could test out on the site, or a more specific description of the problem. – Alk Feb 24 '22 at 23:54
  • I went to your code again and realized that the solution could be even simpler. I've just updated my answer. – Felipe Saldanha Feb 25 '22 at 16:57
  • I just committed that change to the site but I'm still seeing the issue - unless I'm missing something. This only happens on iPhone / iPad browsers btw, it's not an issue on MacOS. – Alk Feb 25 '22 at 17:22
  • You don't need to set position attributes of `` (as you'd do in the overlay div). Just the overflow should resolve (if my whole guess is right). – Felipe Saldanha Feb 25 '22 at 19:19
  • if I remove the "position: fixed" it fixes this issue, however it introduces another issue where the modal jumps up and down on scroll and the background black transparent overlay also doesn't work properly - you can verify by unticking the "position:fixed" and attempting to scroll. – Alk Feb 26 '22 at 20:22
  • I have to award the bounty in 10 hours, so if you'd like to receive it, please have a look – Alk Mar 01 '22 at 15:07
  • Remove not only `position: fixed` but also the `top`, `left` and `right` properties from `` (i.e. leave only `overflow: hidden`). Try not to declare these properties for any element other than the overlay div. You may need to tweak your code until you achieve the desired result. – Felipe Saldanha Mar 01 '22 at 17:21
0

 // 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 }
    );
},
mzs
  • 1