My site: https://www.maprecast.com.au
Above 1025px wide, my website uses horizontal scroll. Below 1025px wide, it needs to use vertical scroll (as the content switches from horizontal to vertical).
My issue is that when I physically resize the browser on a desktop to below 1025px, the horizontal scroll should be disabled and the site should become vertically scrollable - but it doesn't. I can't scroll up or down.
You can replicate the issue by opening the website at 1920px wide then dragging the right side of the browser to below 1025px, and then try to scroll up or down.
When viewing on my physical mobile device the vertical scroll works correctly.
It seems the only time the vertical scroll doesn't kick in is when the browser is physically resized with the mouse.
I used Wordpress and Elementor Pro to build the site, and followed this tutorial to make the website scroll horizontally. https://www.youtube.com/watch?v=AKyMQB9mABA
html and JS that were supplied by the tutorial:
html {
scroll-behavior: smooth;
}
@media only screen and (min-width: 1025px) {
main {
overflow-x: hidden;
display: flex;
}
section {
min-width: 100vw!important;
min-height: 100vh!important;
}
}
<script type="text/javascript">
if (window.innerWidth > 1025) {
const scrollContainer = document.querySelector("main");
scrollContainer.addEventListener("wheel", (evt) => {
evt.preventDefault();
scrollContainer.scrollLeft += evt.deltaY;
});
} else {
}
</script>
I have tried using a media query to disable the JS activating below 1025px.
I have also tried adding a second section of JS to specify .scrollTop under 1025px.
<script type="text/javascript">
if (window.innerWidth < 1025) {
const scrollContainer = document.querySelector("main");
scrollContainer.addEventListener("wheel", (evt) => {
evt.preventDefault();
scrollContainer.scrollTop += evt.deltaY;
});
} else {
}
</script>
Neither of these have worked.
I assumed from the JS supplied that the line if (window.innerWidth > 1025) would mean the JS wouldn't work under 1025px wide. Maybe it does disable it but then I need to specify a vertical scroll to kick in from 1024px down?
What I'm wanting to do is essentially disable the horizontal scroll JS working below 1025px, so the site becomes vertically scrollable OR force the site to scroll vertically under 1025px.
Any help would be appreciated :)
