How to Hide the Vertical Scrollbar in CSS. To hide the vertical scrollbar and prevent vertical scrolling, use overflow-y: hidden like so: HTML.
1. Set the overflow of the parent div as hidden. 2. Set the overflow of the child div to auto and the width 200% (or anything more than 100%, or more than the width of the parent - so that the scrollbar gets hidden).
I'm using the Jquery dialog to open a popup box window on top of a page. When I open the dialog box, I want the general page scrolling to be disabled. To do so, I am doing :
$('body').css({overflow:'hidden'});
when the dialog opens, and:
$('body').css({overflow:'auto'});
when the dialog closes.
This works but when the scrollbar is being removed, the content in the back moves to the right and the result is not nice.
I tried another method, by creating a css class "noscroll", as such :
body.noscroll
{
position: fixed;
overflow-y: scroll;
width: 100%;
}
then, instead of the previous js code, I'm adding and removing this class to the body on dialog open/close.
Now this works for the scrollbar and the content in the back doesn't move to the right, but with this method the content in the back goes back to the top.
So basically method1 makes the content move to the right, and method2 makes the content move back to the top.
Does anyone know a solution for this? no scroll for the content in the back when the dialog opens, and no movement on disabling scrolling...?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With