垂直スクロールバーを非表示にできない

垂直スクロールバーを表示せずにスクロールできるようにしたいテキストのdivがあります。私はこれに従ったが役に立たなかったが、スクロールバーはまだ見えるが、テキストはスクロールする。あなたのコードをテストした後、垂直スクロールバーがここに表示されていないためで作業しているどのようなブラウザ Hide scroll bar, but while still being able to scroll 垂直スクロールバーを非表示にできない

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

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


<html> 
    <body> 
    <div id="activity_parent"> 
     <div id="activity_child"> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     good<br/>bye. 
     </div> 
    </div> 
    </body> 
</html>

出典

2017-08-26 Dercni

以下のように

ベターはまだスタイルタグ内のCSSを置きます。親要素に100％を追加します。つまり、内部のコンテンツの完全な高さに対応するように展開されます。コンテンツの高さに依存しない値**を宣言する必要があります： '25％ '、ビューポート単位、固定ピクセル/ em/rem/pt値です。たとえば、親の高さを200ピクセルに設定すると、それが機能することがわかります。 – Terry

こんにちはテリー、50％を使用してもスクロールバーが表示されます。これはなぜ高さ：100％で動作しますか？ http://jsfiddle.net/5GCsJ/954/ – Dercni

。あなたは `高さを使用しているためである

<html> 
    <style> 
    #activity_parent { 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
    } 

    #activity_child { 
    width: 100%; 
    height: 100%; 
    overflow-y: scroll; 
    padding-right: 17px; /* Increase/decrease this value for cross-browser 
    compatibility */ 
    } 
    </style> 
    <body> 
    <div id="activity_parent"> 
     <div id="activity_child"> 
    <!-- you content goes here --> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     hello<br/>I<br/>am<br/>here<br/> 
     good<br/>bye. 
     </div> 
     </div> 
     </body> 
    </html>

出典

2017-08-26 23:53:29 dfemo

Terryのスタンドアロンファイルとして感謝します:)私のレールアプリでは、インラインスタイルのない同じHTMLには垂直スクロールバーが表示されます。私はチェックして、同じCSSがdivに適用されているが、そこに他のCSSもあるので、何かが矛盾していなければならない。 – Dercni

OK、問題のCSSのように見える "box-sizing：border-box;"親ディビジョンと子ディビジョンの両方に適用されます。私はこれがどこから来ているのか分かりませんが、スクロールバーが消えるとスクロールバーが消えます。 – Dercni

垂直スクロールバーを非表示にできない

答えて

関連する問題