オーバーフローを非表示にする方法：中心のdiv内のスクロールスクロールバー

Question

この質問は重複していますが、これまでに何も行われていませんでした。
私は、overflow-y：scrollを使用する未知の幅のdivを持っていますが、スクロールバーを非表示にして、スクロール可能なままにします。画面の中央に配置されているので、どうすればいいですか？

.content-middle { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    max-height: 81vh; 
 
    overflow-y: scroll; 
 
}

<div class="content-middle"> 
 
    <p>My content is here</p> 
 
</div>

Answer 1

基本的に、スクロール可能な要素を別の要素の中に置き、絶対的な位置に配置します。 （負の値）

次に、スクロール可能な要素の内容に注目してください。

body { 
 
    overflow: hidden; 
 
} 
 

 
.content-middle { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    max-height: 81vh; 
 
    overflow-y: scroll; 
 
    position: absolute; 
 
    width: 100%; 
 
    right: -17px; 
 
}

<div class="content-middle"> 
 
    <p>My content is here</p> 
 
</div>

Answer 2

div { overflow: visible | hidden | scroll | auto | inherit } 

私はあなたがそれを隠す、スクロール可能なそれを維持できるかどうかわかりません。私はこれがうまくいくと思います。

Answer 3

#parent{ 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 

#child{ 
    width: 100%; 
    height: 100%; 
    overflow-y: scroll; 
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */ 
} 

この作品はこれを見ていない、あなたがスクロールすることができますが、目に見えるスクロールバー:) あなたがしなければならないだろうすべては1、すでにあなたの外のdivを追加することです持ってる。

http://jsfiddle.net/5GCsJ/2125/