Trackpad not working as expected for horizontal scroll

I’ve got the little bit of below code running horizontal scroll on 2 pages on my website

<script>
        // mouse wheel horizontal scroll
        const scrollContainer = document.querySelector("main");

        scrollContainer.addEventListener("wheel", (evt) => {
            evt.preventDefault();
            scrollContainer.scrollLeft += evt.deltaY;
        });
    </script>

The issue is that when you are using a trackpad, your first thought is to move sideways, but as it is currently you have to move up and down to scroll horizontal.

Is there aa way to turn this off for if someone is using a trackpad? Or any alternative suggestions?

Bonus if it can be turned of for mobile display size, as horizontal isn’t used here. Touch screen scrolling works but if you are using a scroll wheel it doesn’t scroll up and down becasue of this code. (Realise it’s very unlikily anyone would be using a mouse at tablet mobile screen sizes)

I’m expecting the trackpad to be able to move left to right and scroll through horizontally, while still keeping scroll wheel working horizontal, but only on two pages of the website.