What is the best way to eliminate excess elements from overflow:hidden?

Question

What is the best way to eliminate excess elements from overflow:hidden?

Whenever I click on a modal, it changes my body to overflow:hidden. As a result, the scrollbar disappears and my page becomes unscrollable. Once I close the modal, my body reverts back to overflow:auto allowing the page to scroll again. These functionalities are implemented using two simple functions that I have defined in my Javascript.

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

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

Despite this mechanism being in place, there is a slight 'jank' where the entire page shifts to the right when the scrollbar is removed. Is there a solution to eliminate this effect or perhaps another method to prevent scrolling when the modal is active?

javascript html css

Answer 1

Answer №1

If you want to prevent scrolling while still displaying the scrollbar, you can achieve this by using a JavaScript event listener to catch scroll events in the following way:

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

// Enable scroll blocking
document.addEventListener('scroll', stopScrolling);
document.addEventListener('mousewheel', stopScrolling);
document.addEventListener('touchmove', stopScrolling);

// Disable scroll blocking
document.removeEventListener('scroll', stopScrolling);
document.removeEventListener('mousewheel', stopScrolling);
document.removeEventListener('touchmove', stopScrolling);

Another option is to dynamically add the touch-action: none CSS property to disable scrolling on a specific element.

Answer 2

If you want to prevent scrolling while still displaying the scrollbar, you can achieve this by using a JavaScript event listener to catch scroll events in the following way:

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

// Enable scroll blocking
document.addEventListener('scroll', stopScrolling);
document.addEventListener('mousewheel', stopScrolling);
document.addEventListener('touchmove', stopScrolling);

// Disable scroll blocking
document.removeEventListener('scroll', stopScrolling);
document.removeEventListener('mousewheel', stopScrolling);
document.removeEventListener('touchmove', stopScrolling);

Another option is to dynamically add the touch-action: none CSS property to disable scrolling on a specific element.

What is the best way to eliminate excess elements from overflow:hidden?

Answer №1

Similar questions

I'm wondering why this isn't working properly and not displaying the closing form tag

Using Material UI with React hooks

Guide to redirecting on click when utilizing an iframe

ReactJS: Error - Attempting to convert an undefined or null value to an object is not

How to resolve undefined callback when passing it to a custom hook in React Native

You cannot assign a promise to a React state

Extract information from the table using $_POST

Centering numerous elements on all screen sizes and devices

After the initial submission, the Bootstrap placeholder for the Select Option is only displayed

Refresh the component data according to the vuex state

Bootstrap Table encountering issues when displaying JSON data from Ajax response

Unable to use npm module "csv-db" as it is currently experiencing functionality issues

Is there a way to horizontally align text in a div using center alignment?

What is the best way to link function calls together dynamically using RXJS?

Incorporating External Content into Your HTML Website

Aligning two floating elements vertically in respect to each other

What's causing these divs to be misaligned in various directions?

Retrieving Gravity Forms AJAX Confirmation Message programmatically in JavaScript instead of displaying it

What is the best method for adjusting height in MaterialUI components?

Looking for a solution to my issue - my for loop is looping more times than it should