当一个使用了
这里有一个演示页面展示这种行为。
有没有办法让Safari中的滚动条保持可见?
fixed
属性,并且其样式为overflow: auto
或scroll
的元素被包含在具备overflow: hidden
样式的body
元素内,在Safari 8.0.x中,滚动条是不可见的,但元素仍然可以滚动。而在Firefox 41.0.x中,滚动条是可见的。这里有一个演示页面展示这种行为。
有没有办法让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>