是否可以將滾動條從容器移出到文檔？

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>