Remove scrollbar jquery

2 Views

I am developing a plugin on wordpress (currently using Twenty Thirteen theme) that when you click a div a modal will show. Whenever the modal is showing I want to remove the scrollbar on body.

I used the code below but it seems it doesn’t work:

Read More
jQuery("#page").css("overflow", "hidden");
jQuery('body').css('overflow','hidden');

I can see style="overflow: hidden;" on firebug is being added but the scrollbar is still showing.

I also tried using !IMPORTANT like jQuery('body').css('overflow','hidden!IMPORTANT'); but still not working

I hope someone can help me with this.

Thanks!

Post Views: 2

Related posts

Leave a Reply

4 comments

  2. See my fiddle: Here

    Because your body doesn’t have a set height, it isn’t overflowing so overflow doesn’t do anything by itself. When the dialogue is visible, add a height to your body.

    body.dialog-visible {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

  3. use this css fro removing the scrollbar

    ::-webkit-scrollbar { 
    display: none; 
}

    be sure to use in proper tag otherwise it will hide all scrollbar.

  4. Add the following style:

    <style>
BODY #s4-workspace 
{
OVERFLOW-X: hidden !important;OVERFLOW-Y: hidden !important;
}
</style>

    This removes both scroll bars.