Lord Eww Lel Lord Eww Lel - 9 days ago 5
CSS Question

jQuery .onload Function to Remove Scrollbar Until Page Load Not Working

I want a jQuery function that removes the vertical scrollbar until the page has fully loaded but it doesn't seem to be working. Any insight on the problem would be great. Thanks!

$(window).on('load', function () {
$('body').addClass('stop-scrolling');
$('body').removeClass('stop-scrolling');
});


.stop-scrolling {
height: 100%;
overflow: hidden;
}

Answer

The issue here is that your JS doesn't run until after the page has finished loading. This means the scroll bar is visible the entire time the page is loading. Then, once the page loads, you add the stop scrolling class and then, milliseconds later, you remove it again. The net result of this is that nothing appears to happen.

To achieve what you need, put the .stop-scrolling class directly in the HTML source of your page on the <body> element and then only remove it in the window.load event handler.

Comments