Question

So, I have a particularly unique goal I wish to achieve with CSS, HTML and jQuery. Basically, I have a page element that when I mouse over it, I want scrolling to be disabled. I am currently achieving this by setting the body’s overflow property to “hidden.” However, the disappearing scrollbars means that content is shifting to the right to fill the void created by the disappearing vertical scroll bar. Is there away to make the page behave as overflow:hidden but still display scrollbar placeholders?

Answer 1

You could do it by having a div within a div, such that the outer div is scrollable (auto) and then resize the inner div on mouseover to be exactly the right size.

So by example…

HTML:

<div id="outerTest" >
    <div id="innerTest" >
        ...content goes here...
    </div>
</div>

CSS:

#outerTest {
    width: 100px;
    height: 100px;
    overflow: scroll;
}
#innerTest {
    overflow: hidden;
}

jQuery:

$("#outerTest").hover(function() {
    $("#innerTest").css({width: "100%", height: "100%"});
}, function() {
    $("#innerTest").css({width: "auto", height: "auto"});
});