当具有fixedoverflow: auto元素中包含scrollbodyoverflow: hidden元素时,在Safari 8.0.x中,滚动条不可见,但该元素仍会滚动。在Firefox 41.0.x中,滚动条可见。

这是显示该行为的fiddle

有什么办法可以使滚动条在Safari中可见?



*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    position: relative;
    margin: 0;
    padding: 0;
}

.sidebar {
    position: fixed;
    max-height: 100vh;
    min-height: 100vh;
    background: lightblue;
    width: 200px;
    top: 0;
    right: 0;
    padding: 20px;
    overflow-y: scroll;
}

.content-a {
    background: yellow;
    height: 900px;
}

.main {
    background: grey;
    min-height: 100vh;
    padding: 10px;
}

.content-b {
    height: 200px;
}

body, .main {
    overflow: hidden;
}

<div class="sidebar">
    <div class="content-a">
        content
    </div>
    bottom
</div>
<div class="main">
    <div class="content-b">
        content
    </div>
    bottom
</div>

最佳答案

尝试对其进行样式化并强制其显示:

::-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);
}

关于html - 滚动条在Safari中不可见,带有溢出-Y:滚动,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33288071/

10-12 12:30
查看更多