React native web scrollView horizontal scroll with mouse

Question

Using react-native-web, I have a scrollView with content much wider than the screen. Using 'horizontal' I can scroll along the x-Axis as expected, however only with the touchpad of my laptop. Mouse wheel scrolling doesn't do anything since the wheel apparenlt only scrolls vertically and not horizontally. I have been looking for a while but cannot find any way to do horizontal scrolling with the mouse wheel. Any help with this would be greatly appriciated!

Answer 1

By default, the user needs to hold Shift + Scrolling Mouse Wheel to scroll horizontally.

Edit: This issue can be solved via jQuery but requires you to hide the vertical bar with CSS "overflow-y: hidden". You will need to download jQuery.js and jQuery-mousewhee.min.js and include them in your html.

After you download the files, include the scripts below in your code.

<script scr="jquery-3.6.0.min.js"></script>
<script scr="jquery-mousewhee.min.js"></script>

Then include in your body's CSS (or any div that you want to scroll horizontally)

overflow-y: hidden;

Finally, add in the custom script

<script>
    $(document).ready(function() {
        $('html, body, *').mousewheel(function(e, delta) {
            this.scrollLeft -= (delta * 30);
            e.preventDefault();
        });
    });
</script>

Done.

Note: You will need to mess around with the code if you want to include the vertical bar back.