是否可以将滚动条从容器移出到文档？

Question

.cnt 
    overflow: auto 

https://codepen.io/DTX/pen/qjjyEe

我希望它看起来像在图像上滚动条： Img

附：为什么在内容结尾处有1px行？

Answer 1

你可以欺骗，通过从.wrap删除overflow: auto和增加额外的覆盖隐藏溢出的内容：

https://codepen.io/anon/pen/PjjBxE

Answer 2

你可以用一个面具，让身体溢出：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>