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

我有一个滚动div，其中我使用CSS显示/隐藏滚动条，具体取决于用户是否将鼠标悬停在该div上。No hover=No scrollbar

div.mouseScroll {
    overflow: hidden;
}

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

很简单，除了一个问题。当用户将鼠标悬停在div上时，它会显示滚动条，但在这样做时，它也会稍微调整div内容的大小以适应滚动条。有没有办法将滚动条显示在一边，或者将其悬停在顶部？添加滚动条时，防止div内的内容调整大小所需的一切

---

我可以使用javascript。

我不知道这是否是您要找的

为悬停状态样式添加一点点宽度

div.mouseScroll {
    overflow: hidden;
    width:200px;
    height:300px;
}

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

---

使用

可见性

隐藏/显示两种状态下永久显示的滚动条（请参阅）：

CSS:

.test{
背景：#ccc；
宽度：150px；
}
.test>DIV{
溢出y：滚动；
可见性：隐藏；
高度：150像素；
}
.test>DIV>DIV{可见性：可见；}
.test:hover>DIV{visibility:visible；}
*+test>DIV>DIV{minheight:0；}/*hasLayout for IE7*/

HTML:

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。

更改默认滚动条功能的唯一方法是在javascript中实现一个完全自定义的滚动条。请看这里：

接受答案中的JSFIDLE提供了源代码