Comments (7)
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.
- 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;
- Since I can't get the
translateY
of the current component from framer-motion'sonDrag
event callback, I have to get thetranslateY
value by manipulating the DOM directly, and have to write some really ugly Regex code for safari compatibility; - I haven't tested the compatibility with Server Side Rendering.
from react-modal-sheet.
I have a similar situation, where you cannot scroll when the iPhone Keyboard is open. Does anybody have a solution for that?
from react-modal-sheet.
I'm having the same problem, in the real phone I cannot scroll. Do you guys found a way to fix it?
from react-modal-sheet.
Have the same problem. Only solution I've found is to disable dragging and create a button to close the sheet
from react-modal-sheet.
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.
from react-modal-sheet.
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',
}}
>
...
from react-modal-sheet.
Closing this since a somewhat workable userland solution exists.
from react-modal-sheet.
Related Issues (20)
- framer-motion is not tree-shaking HOT 1
- Unable to scroll behind the sheet, but able to click HOT 1
- Scroll flickering on iOS with Sheet.Scroller & inputs HOT 4
- Spring type animation
- Sheet is not opening on mobile browsers
- Sheet is not reopening in desktop Chrome HOT 4
- Allow style with Tailwind with className prop HOT 2
- initialSnap -34px bug HOT 2
- How do I implement a sticky footer? HOT 1
- Customer Header breaks dragging behavior
- Stacking sheets HOT 1
- TypeError: undefined is not an object (evaluating 'scrollable.scrollTop') HOT 1
- prevent Closing component HOT 2
- Sheet not closing on mobile HOT 8
- Bug on Safari Mobile, when switching the address bar up
- Bug: Mobile Safari input inside sheet stays behind when sheet moves HOT 4
- Bug: page overflow when mobile on screen keyboard is active (chrome) HOT 1
- Break tree shaking issue because of a "motion" HOT 3
- Close the sheet, but the component remains mounted with opacity 0. HOT 1
- Drag functionality with Scroller HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-modal-sheet.