Scrolling on iOS is blocked even when blocking is set to false

[yairhaimo]

If you open the BottomSheet it will block any scrolling containers on iOS even if the BottomSheet is configured as false. Example link: https://react-spring-blocking-ios-scroll.vercel.app/ Example code:

import { useState } from 'react';
import { BottomSheet } from 'react-spring-bottom-sheet';
import 'react-spring-bottom-sheet/dist/style.css';

export default function Home() {
	const [open, setOpen] = useState(false);
	return (
		<>
			<button onClick={() => setOpen(true)}>Open</button>
			<div style={{ border: '3px solid red', overflowY: 'scroll', height: '100px' }}>
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>5</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
			</div>
			<BottomSheet open={open} blocking={false}>
				<div>Bottom Sheet Content</div>
				<div>Bottom Sheet Content</div>
				<div>Bottom Sheet Content</div>
				<div>Bottom Sheet Content</div>
				<div>Bottom Sheet Content</div>
				<div>Bottom Sheet Content</div>
				<div>Bottom Sheet Content</div>
				<div>Bottom Sheet Content</div>
			</BottomSheet>
		</>
	);
}

[spencersteers]

Ran into this too. Adding data-body-scroll-lock-ignore="true" will fix it.

[yairhaimo]

Awesome. Works great. Thanks!

[stipsan]

Hey @spencersteers and @yairhaimo have you seen the scrollLocking option? This part of the API irks me and I'll give it a fresh look when I have more time on my hands. The reason it's a separate option right now is because iOS Safari misbehaves if you're dragging the bottom sheet near the bottom edge on a page with a scrollbar on document.body.

The ideal scenario would be to lock scrolling only when a dragging action is currently happening. That's the only scenario where it's needed after all.

I'm re-opening this issue so I can come back to this later and solve it properly. Thanks for reporting @yairhaimo, and special thanks to you @spencersteers for stepping in and helping out 🎉

[yairhaimo]

Hey. I haven't seen that option, thanks for drawing my attention to it. Thanks again for the great library 💯

[leecrossley]

There are potentially some improvements that can be made here, some ideas:

• checking to see if the body content is scrollable, a lot of modern web / hybrid apps don't have a scrollable body and this default will have some devs tearing their hair out for a couple of hours (cough) or:
• snapPoints all greater than 0, then ignore?
• -webkit-fill-available might be worth a look?
• 1px bottom hack?

Thanks for a great lib :)