-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
FlatList Inverted ScrollWheel Fix #1137
Conversation
@@ -937,6 +956,11 @@ class VirtualizedList extends React.PureComponent<Props, State> { | |||
}); | |||
} | |||
this._scheduleCellsToRenderUpdate(); | |||
|
|||
if (prevProps.inverted !== inverted) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks like this should be run on unmount too
} | ||
|
||
_invertedWheelEvent = (e) => { | ||
const scrollNode = this.getScrollableNode(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We could avoid another call to get the node by passing it from the first site that gets the node
@@ -597,6 +597,9 @@ class VirtualizedList extends React.PureComponent<Props, State> { | |||
ref: this, | |||
}); | |||
} | |||
if (this.props.inverted) { | |||
this._invertScrolling(true); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
My thought is that this should probably be done in the platform ScrollView, rather than this component. I think this list passes all its props to ScrollView, even though ScrollView doesn't technical support that prop
EDIT July 2019: have a better version of this code in a codesandbox link you can find here Was running into this, came up with this hacky solution in my component with the flatlist until a fix is made:
Unfortunately results in very janky scrolling (which I presume would also happen with this PR) which doesn't feel great on the chat screen I'm building. onEndReached also isn't being called when I have inverted={true} and this does not fix it, but maybe that should be in a separate issue. Wondering if anyone has any escape hatch solutions, e.g. dropping down to normal react and/or using something like react-window and/or using some css to anchor the messages to the bottom of the list. |
Trying to move this forward in regards to the feedback and original attempt I did some work on it over in #1241 |
The patch on this PR work in my app. Great job! |
Closing this PR due to inactivity and it not adequately solving the issue. Thanks for having a go |
Fix for #995. Makes scroll wheel go in correct direction when FlatList is inverted. Note that desktop safari won't "bounce" with this implementation.
wheelDeltaY
is for Safari and Chrome.deltaY
is for Firefox.