I came across a helpful post on StackOverflow that suggested using the following code to disable horizontal scrolling:
html, body {
overflow-x: hidden;
}
This solution did resolve my issue of horizontal scrolling, but unfortunately it caused problems with my responsive navigation bar. Previously, the navigation bar would hide as you scrolled down the page and reappear when scrolling up. Does anyone have a solution to maintain this functionality while disabling horizontal scrolling?
Below is the code for the responsive navigation bar:
let prevScrollPos = window.pageYOffset;
window.onscroll = () => {
let currentScrollPos = window.pageYOffset;
if (prevScrollPos > currentScrollPos) {
document.getElementById("nav").style.top = "0";
} else {
document.getElementById("nav").style.top = "-100px";
}
prevScrollPos = currentScrollPos;
};
Any suggestions would be greatly appreciated!