Incorrect scroll direction on web with `inverted` prop

[biw]

Current behavior

The scroll direction is reverted. When using the scroll wheel going down moves the content up (were on every other webpage it goes down) and when using the scroll wheel going up moves the content down.

Expected behavior

The scroll direction is the same as other scroll bars on the web

I found a fix for generic divs https://codepen.io/anon/pen/pdrLEZ from https://stackoverflow.com/questions/18614301/keep-overflow-div-scrolled-to-bottom-unless-user-scrolls-up#comment80511192_44051405 but am having trouble refactoring flash-list to use it

To Reproduce

See example at https://codesandbox.io/p/sandbox/silly-taussig-gr5zfd

Platform:

• [ ] iOS
• [ ] Android
• [x] Web

Environment

1.7.1

I saw #558 but created a new ticket with a reproduction

[biw]

I was able to hotpatch this one by disabling inverted and setting nativeID="chat-items" on FlashList and then setting a global CSS to

 #chat-items {
  flex-direction: column-reverse;
}

but it would be great to include this upstream. Will do some more investigation

[biw]

After more testing, I found that although the first few items render with the above column-reverse fix, it does not scale past 20 items: https://codesandbox.io/p/sandbox/stoic-julien-dssghr

I'd love to help fix this if someone could point me in a relative direction! 😄