CODEWITHSUNDEEP
javascripthtmlcssstylesheet
HP.
HP.

Reputation: 19896

Scroll bar jumping on hover

Code: http://jsfiddle.net/qhoc/gutWm/1/

HTML:

<div>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>
            <input type="text" value="Search" />
        </li>
    </ul>
</div

CSS:

div {
    position: fixed;
    width: 300px;
    background: gray;
    overflow: none;
    top: 0;
    bottom: 0;
}

div:hover {
    overflow: auto;
}

ul {
    border: 1px solid red;
}

Question: If you scroll the div to bottom and move the mouse out of the div, the whole inner content (red border) will jump instead of stay still. Why is that and how to fix?

It doesn't make sense to me because there is no horizontal bar and there is nothing (ul) expanding outside the div width.

Upvotes: 0

Views: 1823

Answers (2)

Pompey
Pompey

Reputation: 606

If you take the overflow:auto out of the div:hover and instead put it into the div part in css then it will fix it. Right now all you have is that you always put overflow only on hover instead of having it there full time. 

div {
    position: fixed;
    width: 300px;
    background: gray;
    overflow: auto;
    top: 0;
    bottom: 0;
    overflow: auto;
}

Upvotes: 0

bunndan
bunndan

Reputation: 2847

CSS overflow doesn't have a none value. Use hidden if you want to hide the scrollbar when you mouse out of the div.

div {
    position: fixed;
    width: 300px;
    background: gray;
    overflow: hidden;
    top: 0;
    bottom: 0;
}

If not, then overflow: auto; will keep the scrollbar present.

Upvotes: 2

Related Questions