Is not scrollable when tried with actual mobile phone.

[zillur-modoplus]

Hi there,

So I tried to use this for the next project. And it worked perfectly when I tried here in the browser but when I tried with the actual phone, I was unable to scroll. I tried exactly what it stated here. Could you please take a look and let me know please? Thank you.

UPDATE: I was able to scroll when I disable the drag to close function.

My code:

<Sheet isOpen={isMSOpen} onClose={() => setMSOpen(false)}>
          <Sheet.Container>
            <Sheet.Header />
            <Sheet.Content>
              {posts.map((post) => (
                <div style={{ color: "#000", background: "#aaa" }}>
                  <h5 key={post.id}>{post.title}</h5>
                  <p>{post.body}</p>
                </div>
              ))}
            </Sheet.Content>
          </Sheet.Container>
        </Sheet>

[adshrc]

I have a similar situation, where you cannot scroll when the iPhone Keyboard is open. Does anybody have a solution for that?

[laisooliveira]

I'm having the same problem, in the real phone I cannot scroll. Do you guys found a way to fix it?

[LucaBogino]

Have the same problem. Only solution I've found is to disable dragging and create a button to close the sheet

[Vizards]

It is possible to make dragging gestures and scrolling operations co-exist, but scrolling effect needs to be simulated by dragging gestures. That is, we need to make the height of the SheetContent change to the height of the content to be scrolled, and make the SheetContent respond to the dragging gesture inside the SheetContainer to simulate the scrolling effect on the mobile device.

You can see what I have changed in the following link. https://github.com/Temzasse/react-modal-sheet/compare/master...Vizards:react-modal-sheet:feat/scroll-drag-coexist?expand=1

And check the altered effect screenshot video here. https://user-images.githubusercontent.com/13443193/203701569-96724db3-beba-4382-a6bd-12a261d6e84c.mov

But this change is not completely ready, it currently has some problems.

1. Since the SheetContent becomes draggable, it can't respond to the desktop browser's scrolling events. Perhaps this could be patched with some compatibility code;
2. Since I can't get the translateY of the current component from framer-motion's onDrag event callback, I have to get the translateY value by manipulating the DOM directly, and have to write some really ugly Regex code for safari compatibility;
3. I haven't tested the compatibility with Server Side Rendering.

[Temzasse]

Hi everyone 👋

It is possible to have the sheet content be scrollable on mobile devices. Not sure if there are device specific limitations but at least for me the scrolling + slack message examples scroll just fine on my iPhone (even when the keyboard is up).

There will always be some glitchy behaviour if you try to combine scrolling with dragging gestures since it is very hard to distinguish between the two. I'm sure Framer Motion already does some magical stuff to make this as smooth as possible 😄 Afaik there is not much this library can do to make scrolling + dragging work better since we are relying on Framer Motion.

If you are tying to scroll the underlying page while the sheets is open that is not possible since the sheet will prevent body scrolling in order to avoid weird glitches on iOS where the sheet dragging gestures are interpreted as scrolling for the body element.

[adshrc]

I have found a workaround. I'm using "use-detect-keyboard-open" from npmjs to detect, if the keyboard is open. Then i'm adding a padding-bottom dynamically, to move everything up. The default 1.25rem is to move everything above the iOS bottom home bar.

const isKeyboardOpen = useDetectKeyboardOpen();
const keyboardHeight = (isKeyboardOpen && window.innerHeight - window.visualViewport.height + 'px') || 0;

  return (
    <Sheet
      isOpen={isOpen}
      onClose={closeModal}
      detent="content-height"
      disableDrag={isKeyboardOpen}
      {...props}
    >
      <Sheet.Container
        style={{
          paddingBottom: keyboardHeight || '1.25rem',
          transition: 'padding 200ms',
        }}
      >
...

[Temzasse]

Closing this since a somewhat workable userland solution exists.