Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you prevent over-scrolling using react-native ScrollView.scrollTo()?

After the user does some action I want to scroll to a particular section within a ScrollView, which I'm doing using this code:

this.refs.detailsView.measure((x, y, width, height, pageX, pageY) => {
  this.refs.homeScrollView.scrollTo({ x: 0, y: pageY - 64, animated: true });
});

The problem is the "detailsView" View is near the bottom of the ScrollView and on the largest iPhones, scrollTo() ends up scrolling past the bottom of ScrollViews "natural" max scroll point and you can see the ScrollViews background colour (dary grey) as though you over-scrolled using touch gestures...the components in the ScrollView have the green background colour.

Does anyone have a suggestion for how to prevent this "over-scrolling" when using the ScrollView.scrollTo() function?

react-native: v0.36

enter image description here

like image 658
SomethingOn Avatar asked Nov 09 '22 05:11

SomethingOn


1 Answers

This disables the scrollview from bouncing past its limit

bounces={false}
like image 150
Kirby Avatar answered Nov 15 '22 13:11

Kirby