How to remove jank from overflow:hidden?

Question

I have a modal that changes my body to overflow:hidden when clicked. This removes the scrollbar so my page wont scroll. When you close the modal, my body changes back to overflow:auto and the page can scroll again. This is done with two simple functions I set in my Javascript.

function hidden() {
    document.querySelector("body").style.overflow = "hidden";
}

function show() {
    document.querySelector("body").style.overflow = "auto";
}

However, there's some jank involved where you can see my entire page move to the right when the scrollbar is removed. Is there any way I can fix this to not look so bad? Or perhaps there's a different way to disable scrolling when the modal is up?

Answer 1

You could disable scrolling while keeping the scrollbar with a JS event listener to intercept scroll events like this:

const ignoreScroll = (e) => {
    e.preventDefault();
};

// Add scrolling block
document.addEventListener('scroll', ignoreScroll);
document.addEventListener('mousewheel', ignoreScroll);
document.addEventListener('touchmove', ignoreScroll);

// Remove scrolling block
document.removeEventListener('scroll', ignoreScroll);
document.removeEventListener('mousewheel', ignoreScroll);
document.removeEventListener('touchmove', ignoreScroll);

You could also programmatically apply the touch-action: none CSS rule to disable scrolling on an element.