Question

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值。如果要在鼠标移出div时隐藏滚动条，请使用hidden。

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

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

Answer 2

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

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

滚动条在悬停时跳跃

2 个答案: