React native web scrollView horizontal scroll with mouse

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!

1 answer

  • answered 2021-05-03 18:06 Tangy

    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.