CSS - 溢出：滚动; - 始终显示垂直滚动条？ [英] CSS - Overflow: Scroll; - Always show vertical scroll bar?

问题描述

所以目前我有：

#div
{
position: relative;
height: 510px;
overflow-y: scroll;
}

但是我不相信一些用户会明白是更内容那里。他们可以向下滚动页面，而不知道我的div实际上包含更多的内容。我使用高度510px，以便它截断一些文本，所以在一些页面它看起来像有更多的内容，但这并不适用于所有的人。

However I don't believe that it will be obvious to some users that there is more content there. They could scroll down the page without knowing that my div actually contains a lot more content. I use the height 510px so that it cuts off some text so on some pages it does look like that there is more content, but this doesn't work for all of them.

我使用的是Mac，在Chrome和Safari中，垂直滚动条只会在鼠标悬停在Div上时显示，并且您正在滚动。有没有办法总是显示它？

I am using a Mac, and in Chrome and Safari the vertical scroll bar will only show when the mouse is over the Div and you actively scroll. Is there a way to always have it displaying?

推荐答案

刚刚遇到这个问题。 OSx狮子隐藏滚动条，而不是在使用，使它看起来更光滑，但同时，你解决的问题出现：人们有时不能看到一个div是否有滚动功能。

Just ran into this problem myself. OSx Lion hides scrollbars while not in use to make it seem more "slick", but at the same time the issue you addressed comes up: people sometimes cannot see whether a div has a scroll feature or not.

修复：在您的css include中 -

The fix: In your css include -

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

自定义外观。 来源

这篇关于CSS - 溢出：滚动; - 始终显示垂直滚动条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！