CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Hunter Bridges
Hunter Bridges

Reputation: 203

Weird HTML/JS/CSS scrollbar functionality puzzle

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?

Upvotes: 1

Views: 431

Answers (2)

Alconja
Alconja

Reputation: 14883

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"});
});

Upvotes: 1

Lyon
Lyon

Reputation: 7364

Alternatively, you could also implement a jQuery-based scroll bar. jScrollPane

Upvotes: 0

Related Questions