最佳答案
你可以使用面具让 body 溢出:https://codepen.io/gc-nomade/pen/jwwpXQ
.wrap {
height: 80vh;
margin: 10vh 10vw;
width: 80vw;
}
.wrap:before {/* here comes the mask hidding edges with a white shadow */
content: "";
position: fixed;
top: 10vh;
bottom: 10vh;
left: 10vw;
width: 80vw;
border: solid 1px;
box-shadow: 0 0 0 10vw white;
pointer-events: none;/* will not catch pointer-events and will let pointer-events occurs within .wrap */
}
.sidebar {
text-align: center;
background: rgba(170, 170, 170, 0.7);
height: 80vh;
position: fixed;
width: 20vw;
left: 10vw;
}
.sidebar button {
margin: 5px;
}
main {
background: #FFAB91;
margin-left: 20vw;
}
header {
background: #ccc;
height: 30px;
text-align: center;
}
header span {
background: #aaa;
display: inline-block;
height: 12px;
margin-top: 9px;
vertical-align: top;
width: 90px;
}
.hide {
display: none;
}
.item {
height: 100px;
background: #ddd;
margin: 20px;
}
.cnt {
padding-bottom: 10vh
}
<div class="wrap">
<div class="sidebar">Sidebar</div>
<main>
<header><span> </span></header>
<div class="cnt">
<div class="item"><a href="">click me</a> or select me </div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</main>
</div>
关于css - 是否可以将滚动条从容器中取出到文档中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44700227/