スクロールバーをコンテナからドキュメントに取り込むことは可能ですか？

Question

.cnt 
    overflow: auto 

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

私はそれが画像上のスクロールバーのように見えるようにしたい： Img

P.S.なぜコンテンツの最後に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>