react-native-web icon indicating copy to clipboard operation
react-native-web copied to clipboard

Add support for `alwaysBounceHorizontal` and `alwaysBounceVertical` to ScrollView

Open chrisdrackett opened this issue 4 years ago • 6 comments

It should be possible to make these work in safari.

chrisdrackett avatar May 02 '20 03:05 chrisdrackett

I'm currently achieving this by measuring the area that contains the scrollview and then setting the scrollview content (on safari only) to be slightly larger than this area. Maybe this should not be part of RNW, but I figured I would bring it up as it is a prop that is available in the react-native itself and is at least partially achievable in web

chrisdrackett avatar May 05 '20 17:05 chrisdrackett

@chrisdrackett Does that work in Chrome?

steida avatar May 05 '20 22:05 steida

no, Chrome as far as I'm aware does not support bounce or overflow scrolling:

https://caniuse.com/#feat=mdn-css_properties_-webkit-overflow-scrolling

that being said, it does seem to work on the top level view (body?) but I don't think you have a lot of control over it aside from turning it off effectively :D

chrisdrackett avatar May 05 '20 22:05 chrisdrackett

looking at that caniuse is somewhat confusing however, as this does work on desktop safari, its just a default now and does not need CSS (as far as I'm aware) to enable.

chrisdrackett avatar May 05 '20 22:05 chrisdrackett

here is how we're currently handling this in our app if anyone is curious:

https://snack.expo.io/@chrisdrackett/joyous-apples

chrisdrackett avatar May 05 '20 22:05 chrisdrackett

I just took some time to update our implementation of this as we're now using it on section and flat lists as well. The hook in this example should work in any list as long as this isn't possible directly in RNW:

https://snack.expo.io/@chrisdrackett/usealwaysbounce

chrisdrackett avatar Apr 07 '21 23:04 chrisdrackett