ホームページ > 記事 > ウェブフロントエンド > CSS を使用してスクロール バーを非表示にするコード例
CSS を使用してスクロール バーを非表示にするコード例
- 黄舟オリジナル
- 2017-10-25 09:53:331977ブラウズ
overflow 属性は、コンテンツが要素ボックス
①visible のデフォルト値からオーバーフローした場合に何が起こるかを指定します。コンテンツはトリミングされず、要素ボックスの外側にレンダリングされます。
②非表示のコンテンツはトリミングされ、残りのコンテンツは見えなくなります。
③スクロール コンテンツはトリミングされますが、ブラウザーには残りのコンテンツを表示するためのスクロール バーが表示されます。
④自動 コンテンツがトリミングされた場合、ブラウザーには残りのコンテンツを表示するためのスクロール バーが表示されます。
⑤inherit は、overflow 属性の値を親要素から継承することを指定します。
例1: テーブルをコンテナとして使用し、スクロールバーを[非表示]にする
注: {①テーブルの表示をブロックに設定します。そうでない場合、スクロールバーは表示されません}
まずテーブルをa p、p の長さと幅 修正するには
垂直方向にのみスクロールしたい場合は、外側の p 属性を設定できます overflow-x: hidden;
例:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动条</title>
<style type="text/css">
*{margin: 0;padding: 0}
.area{width: 300px;height: 600px;background-color: #BFEFFF;
overflow-x: hidden;position: relative}
.area table{display: block;width: 320px;height: 600px;
background-color: #00D685;overflow-y: auto;}
.area table tr td{height: 200px;width: 300px}
</style>
</head>
<body>
<p class="area">
<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
</table>
</p>
</body>
</html>ここでテーブル属性を変更することに注意してください
例 2:
ul をコンテナーとして使用し、スクロール バーを非表示にする
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动条</title>
<style type="text/css">
*{margin: 0;padding: 0}
.area{width: 300px;height: 600px;background-color: #BFEFFF;
overflow-x: hidden;
position: relative}
.area ul{height: 100%;width: 320px;background-color: #00D685;list-style: none;
overflow-x: hidden;overflow-y: auto}
.area ul li{height: 200px;width: 100%;background-color: #cccccc}
</style>
</head>
<body>
<p class="area">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</p>
</body>
</html>原則: コンテナーの外側に overflow:hidden の別のレイヤーをネストし、内部コンテンツのサイズを外部のネスト レイヤーと同じサイズに制限します。だからそれは変装して隠されています。
以上がCSS を使用してスクロール バーを非表示にするコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。