ホームページ > 記事 > ウェブフロントエンド > HTMLスクロールバーのスタイル設定

HTMLスクロールバーのスタイル設定

php中世界最好的语言オリジナル: 2017-11-22 13:33:374104ブラウズ

DIV にスクロールバーを設定する必要がある場合は、スクロールバーのスタイルを水平または垂直に設定する必要があります。今日は、overflow-y と overflow-x を使用する必要があります。これら 2 つの属性について説明します。

div のスクロールバーを設定し、水平スクロールバーと垂直スクロールバーのスタイルを設定します。 div ボックスオブジェクトの右と下のスクロールバー効果を設定するために必要な CSS スタイルは、overflow-y と overflow-x です。同時に、CSS スタイルを使用して HTML フレーム iframe のスクロールバーを非表示にすることもできます。

overflow-y:scroll; 常に垂直スクロールバーを表示します。

overflow-y:visible: コンテンツを切り取ったり、垂直スクロールバーを追加します

div スクロールバーインスタンスを設定します

最初の DIV オブジェクトの div 幅、div 高さ、div 境界線スタイルを設定し、DIV ボックスにデモンストレーションテキストコンテンツを追加することにより、2 番目のボックスは同じ CSS を設定しますスタイル、ボックスのテキストの内容は同じで、水平スクロールバーと垂直スクロールバーを設定して効果を観察します。

最初のボックス CSS の名前は「divcs5-a」、2 番目の DIV ボックススタイルセレクターの名前は「div-b」です。

1. 具体的で完全な HTML ソースコードは次のとおりです:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="gb2312" /> 
<title>div滚动条 在线演示 </title> 
<style> 
.div-a,.div-b{ width:150px; height:100px; float:left; border:1px solid #F00} 
.div-b{ margin-left:10px;overflow-y:scroll; overflow-x:scroll;} 
/* css注释说明：设置第二个盒子与第一个盒子间距为10px，并设置了横纵滚动条样式 */ 
</style> 
</head> 
<body> 
<div class="div-a">测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容</div> 
 
<div class="div-b">测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容</div> 
</body> 
</html>

効果を確認するために、両方の DIV ボックスに同じ CSS スタイルと同じテキストコンテンツを設定しました。 X と y (水平および垂直スクロールバースタイル) は「.div-b」に設定されています

注: 最初のボックス「.div-a」には内容が多すぎるため、スクロールバースタイルが変更されています。変更されたため、オーバーフローは発生しません。これは、垂直の右側 (Y) にはプルダウンとプルアップのスクロールバースタイルがありますが、左右に引っ張ることができないためです。テキストコンテンツが DIV の幅を広げることはできません。DIV 設定幅よりも大きい画像の場合、水平下 (X) にスクロールバー効果が表示されます。

HTMLスクロールバーのスタイル設定

関連記事