How Can I Disable and Re-enable Page Scrolling with jQuery?

How to Disable Page Scrolling with jQuery

Disabling page scrolling can be achieved through a variety of methods, including setting overflow: hidden on the body element. However, there are more effective and precise approaches using jQuery.

One such method involves binding to the body's scroll event and resetting the scrollTop/scrollLeft to a captured value. While this technique works in most scenarios, it may not handle edge cases where the page content is larger than the viewport.

For a more robust solution, consider using the following jQuery code:

$('html, body').css({
    overflow: 'hidden',
    height: '100%'
});

This code completely disables scrolling on both the HTML and body elements by setting overflow: hidden and ensuring a full-height page.

To restore scrolling, simply reverse the changes:

$('html, body').css({
    overflow: 'auto',
    height: 'auto'
});

This approach is more reliable and consistent across browsers, ensuring that the page remains unscrollable even when the content is larger than the viewport.

The above is the detailed content of How Can I Disable and Re-enable Page Scrolling with jQuery?. For more information, please follow other related articles on the PHP Chinese website!