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>

Answer 2

我不知道这是不是你要找的。

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

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

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

Answer 3

更改默认滚动条功能的唯一方法是在javascript中实现完全自定义的滚动条。见这里：hide scrollbar and show on hover like facebook's new chat sidebar

JSFiddle在接受的答案中提供了源代码。

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

3 个答案: