Map jumps vertically with mouse wheel scroll with renderWorldCopies: true

Nobody has claimed this yet.

Reproducible in Chrome and Firefox on this example: https://docs.mapbox.com/mapbox-gl-js/example/render-world-copies/

https://user-images.githubusercontent.com/1505923/149650920-3b0e2def-a069-498f-8ec0-1c66c8de198d.mp4

It appears worse depending on how wide the map is. E.g. If I open that page in a window 535px wide, then the issue does not occur.

The issue only occurs if `renderWorldCopies: true` is set on the map.

I was able to work-around this issue by setting `renderWorldCopies: false` on my map and instead set `maxBounds: -180, -85.051129], [180, 85.051129]]`. However, it still seems like this issue should be fixed.

**mapbox-gl-js version**: v2.6.1

**browser**: Chrome or Firefox

### Steps to Trigger Behavior

1. Select the false option in the example
2. Zoom the map all the way out and continue to scroll out

### Link to Demonstration

https://docs.mapbox.com/mapbox-gl-js/example/render-world-copies/

### Expected Behavior

Map does not move when scrolling since the minimum scroll has been reached.

### Actual Behavior

The map appears to be trying to vertically scroll like a page but then jumps back.

Start with the render-world-copies example in Chrome or Firefox and reproduce the behavior using renderWorldCopies: true, zooming out fully and continuing to scroll. Compare the behavior with renderWorldCopies: false and inspect the map interaction code reached by that example. Done means scrolling at the minimum zoom no longer causes vertical movement or a jump back.

Written by the indexing model from the issue text.