3

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

div.mouseScroll {
    overflow: hidden;
}

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

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

我可以使用 javascript。

4

3 回答 3

4

用于隐藏/显示在两种状态下永久visibility呈现的滚动条（参见jsFiddle 演示）：

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>
于 2012-10-10T14:18:00.207 回答
0

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

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

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

div.mouseScroll:hover {
    overflow-y: scroll;
    width:220px;
}
于 2012-10-10T14:13:17.027 回答
0

更改默认滚动条功能的唯一方法是在 javascript 中实现一个完全自定义的滚动条。见这里：隐藏滚动条并在悬停时显示，就像 facebook 的新聊天侧边栏一样

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

于 2012-10-12T04:42:53.987 回答