Html 滚动条在Safari中不可见w/overflow-y:滚动

Html 滚动条在Safari中不可见w/overflow-y:滚动,html,css,Html,Css,在Safari 8.0.x中,如果主体元素中包含溢出:自动或滚动的固定元素,且溢出:隐藏,则滚动条不可见,但元素仍滚动。在Firefox41.0.x中,滚动条是可见的 下面是一个显示该行为的示例 有没有办法让滚动条在Safari中保持可见 *,*:之前,*:之后{ -webkit框大小:边框框; -moz框大小:边框框; 框大小:边框框; } html{ 身高:100%; } 身体{ 最小高度:100%; 位置:相对位置; 保证金:0; 填充:0; } .侧边栏{ 位置:固定; 最大高度:10

在Safari 8.0.x中,如果
主体
元素中包含
溢出:自动
滚动
固定
元素,且
溢出:隐藏
,则滚动条不可见,但元素仍滚动。在Firefox41.0.x中,滚动条是可见的

下面是一个显示该行为的示例

有没有办法让滚动条在Safari中保持可见

*,*:之前,*:之后{
-webkit框大小:边框框;
-moz框大小:边框框;
框大小:边框框;
}
html{
身高:100%;
}
身体{
最小高度:100%;
位置:相对位置;
保证金:0;
填充:0;
}
.侧边栏{
位置:固定;
最大高度:100vh;
最小高度:100vh;
背景:浅蓝色;
宽度:200px;
排名:0;
右:0;
填充:20px;
溢出y:滚动;
}
.content-a{
背景:黄色;
高度:900px;
}
梅因先生{
背景:灰色;
最小高度:100vh;
填充:10px;
}
.content-b{
高度:200px;
}
主体{
溢出:隐藏;
}

内容
底部
内容
底部

尝试将其样式化并强制其显示:

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4); 
    border-radius: 8px;
    -webkit-border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(100,100,100,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
工作编辑:

.sidebar::-webkit-scrollbar {
    display: inherit;
}

.sidebar:hover::-webkit-scrollbar {
    width: 10px;
}

.sidebar:hover::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4); 
    border-radius: 8px;
    -webkit-border-radius: 8px;
}

.sidebar:hover::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(100,100,100,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

看到了吗?我在Safari 8.0.8(OSX Yosemite)中试用了你的代码,它工作得很好。@Enzo你能看到滚动条吗?是的@Quoid,我在右边有它,允许我滚动黄色sidebar@Enzo奇怪的是,我在小提琴或本地代码上看不到它。这与什么类似,只是它的作用域是整个文档,而不是
元素
(这可能会更好),但我不喜欢的是它不会像默认的浏览器行为那样自动隐藏滚动条这很奇怪,这就是默认的safari行为,也许这也是你可以看到滚动条的原因