ホームページ > 記事 > ウェブフロントエンド > CSSでdivスクロールバーを非表示にする方法
CSS で div スクロール バーを非表示にする方法: 最初に HTML サンプル ファイルを作成し、次に本文にテキスト コンテンツを定義し、次にスクロール パーツの高さを設定し、最後に div スクロール バーを非表示にします。 display:none;" 属性それだけです。
この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。
css div にスクロールを追加してスクロール バーを非表示にするか、スクロール バーのトラックの色を変更します
html
<div class="box"> <div>下面内容会单独滚动</div> <div class="scroll"> <div class="content"> <p>1111111111111111</p> <p>222222222222222</p> <p>333333333333333</p> <p>4444444444444444</p> <p>1111111111111111</p> <p>222222222222222</p> <p>333333333333333</p> <p>4444444444444444</p> </div> </div> </div>
css 部分で
<style> div{ font-size: 15px; margin-bottom: 20px; } .content{ height: 300px;v // 必须设定滚动部分的高度 background-color: cadetblue; color: antiquewhite; overflow-x: hidden; /*x轴禁止滚动*/ overflow-y: scroll;/*y轴滚动*/ } .content::-webkit-scrollbar { display: none;/*隐藏滚动条*/ } p{ margin-bottom: 30px; font-size: 17px; color: #333; } </style>
または、必要に応じて、スクロール バーのスタイルを変更し、次のスタイルを使用します。
<style> div{ font-size: 15px; margin-bottom: 20px; } .content{ height: 300px;v // 必须设定滚动部分的高度 background-color: cadetblue; color: antiquewhite; overflow-x: hidden; /*x轴禁止滚动*/ overflow-y: scroll;/*y轴滚动*/ } .content::-webkit-scrollbar{ //设置滚动条宽高 width:8px; height:8px } .content::-webkit-scrollbar-track{// 滚动条轨道样式 -webhit-box-shadow: inset 0 0 5px transparent; border-radius:0; background:transparent; } .content::-webkit-scrollbar-thumb{//滚动条样式 border-radius:5px; -webkit-box-shadow:inset 0 0 5px #242B56; background:#242B56; } p{ margin-bottom: 30px; font-size: 17px; color: #333; } </style>
[推奨学習: css ビデオ チュートリアル ]
以上がCSSでdivスクロールバーを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。