javascript - 滚动条在悬停时跳跃

Question

代码：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;
}

问题：如果将 div 滚动到底部并将鼠标移出 div，则整个内部内容（红色边框）将跳跃而不是静止不动。为什么会这样以及如何解决？

这对我来说没有意义，因为没有水平条并且没有任何东西（ul）在 div 宽度之外扩展。

Answer 1

CSS 溢出没有none值。hidden如果您想在鼠标移出 div 时隐藏滚动条，请使用此选项。

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

如果没有，那么overflow: auto;将保持滚动条存在。

Answer 2

如果您将其overflow:auto取出div:hover并将其放入divcss 中的部分，那么它将修复它。现在你所拥有的只是你总是只在悬停时放置溢出而不是让它一直在那里。

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