javascript - 显示滚动条时防止 DIV 调整大小

Question

我有一个滚动的 div，我在其中使用 CSS 根据用户是否将鼠标悬停在 div 上来显示/隐藏滚动条。没有悬停 = 没有滚动条。

div.mouseScroll {
    overflow: hidden;
}

div.mouseScroll:hover {
    overflow-y: scroll;
}

很简单，除了一个问题。当用户将鼠标悬停在 div 上时，它会显示滚动条，但同时也会稍微调整 div 内容的大小以适应滚动条。有没有办法以某种方式将滚动条显示在侧面，或将其悬停在顶部？在添加滚动条时如何防止 div 中的内容调整大小。

我可以使用 javascript。

Answer 1

使用 visibility 隐藏/显示在两种状态下永久呈现的滚动条(参见 jsFiddle demo ):

CSS:

.test {
    background: #ccc;
    width: 150px;
}

.test > DIV {
    overflow-y: scroll;
    visibility: hidden;
    height: 150px;
}

.test > DIV > DIV {visibility: visible; }

.test:hover > DIV {visibility: visible; }

    *+HTML .test > DIV > DIV {min-height: 0; } /* hasLayout for IE7 */

HTML:

<div class="test"><div><div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></div></div>