【おやじのweb技】 html/javascript/css等の基本技
winXP+IE6

TopPage表示 /  保 存 /  印 刷 /  Window Resize /  Window Close

b004

スクロールバーを表示する・隠す・色を変更する(基本技)

【目 次】
【技b004-1】テキストエリアのスクロールバーを表示/消去する
   スクロールバーの表示・非表示
   縦方向・横方向のスクロールバーを別々に表示・非表示
【技b004-2】ウィンドウのスクロールバーを表示/消去する
【技b004-3】スクロールバーの色を変える
【解説等】

web工房  Copyright(C) 2004 web工房 All Rights Reserved 
このページのトップに戻る /  Window Resize /  Window Close /  最終更新日表示

action
&
web技

topへ目次へ前へ次へ
【技b004-1】テキストエリアのスクロールバーを表示/消去する

[TextArea]

ボタンをクッリクして下さい
テキストエリアのスクロールバーの
表示/非表示を切り替えます

[TextArea]

縦横方向のスクロールバーとも表示
縦方向のスクロールバーのみ消去
横方向のスクロールバーのみ消去
リンク文字をクッリクして下さい
テキストエリアのスクロールバーの表示/非表示を
縦方向・横方向別々に切り替えます

■最初からテキストボックスを非表示にしておく方法
◆手順【html】
※<textarea〜>にstyle="overflow:hidden"を記述します
※style="overflow:hidden" を記述しなければ表示されます
-----次の行から(copy)-----
<textarea rows="4" cols="30" style="overflow:hidden">
ボタンクリックで...(省略)
</textarea>
-----上の行まで(copy)-----

◆縦方向のスクロールバーのみ非表示
<textarea rows="4" cols="30" style="overflowY:hidden">
◆縦方向のスクロールバーのみ非表示
<textarea rows="4" cols="30" style="overflowX:hidden">

■ボタンやリンク文字をクリックして表示/非表示を切り替える方法(例示はボタンの場合)
◆手順1【html】テキストエリアの設置
※テキストエリアをname属性を設定した<form>〜</form>内に記述します
※<textarea〜>にname属性を記述します
※<textarea wrap="off">はテキストが自動改行されないので横方向のスクロールバーも表示されます(記述しなければ自動改行されるため表示されません)
-----次の行から(copy)-----
<form name="FORM11">
<textarea rows="4" cols="30" wrap="off" name="txtArea_1">
ボタンクリックで...(省略)
</textarea>
</form>
-----上の行まで(copy)-----

◆手順2【イベントハンドラ】ボタンの設置
※ボタンも同じ<form>〜</form>内に記述します
-----次の行から(copy)-----
<input type="button" name="btn_11a" value="表示"
 style="background:#808080"
 onclick="FORM11.txtArea_1.style.overflow='';
       this.style.background='#808080';
       FORM11.btn_11b.style.background='#c0c0c0'">
<input type="button" name="btn_11b" value="消去"
 onclick="FORM11.txtArea_1.style.overflow='hidden';
       this.style.background='#808080';
       FORM11.btn_11a.style.background='#c0c0c0'">
-----上の行まで(copy)-----

※表示状態にするとき...style.overflow='visible'; でないことに注意して下さい

topへ目次へ前へ次へ
【技b004-2】ウィンドウのスクロールバーを表示/消去する

ボタンをクッリクして下さい
ウィンドウのスクロールバーの表示/非表示を切り替えます

■最初からテキストボックスを非表示にしておく方法
◆手順【style sheet】スタイルシートに記述する方法
※スクロールバーの非表示を<head>〜</head>に記述します
-----次の行から(copy)-----
<style type="text/css">
<!--
body { overflow:hidden; }
-->
</style>
-----上の行まで(copy)-----
◆手順【html】<body〜>に記述する方法
※スクロールバーの非表示を<body〜>に記述します
-----次の行から(copy)-----
style="overflow:hidden"
-----上の行まで(copy)-----
◆ウィンドウの場合も、縦横個別にスクロールバーの表示/消去を切り替えることが可能です
   overflowY/overflowX

■ボタンやリンク文字をクリックして表示/非表示を切り替える方法(例示はボタンの場合)
◆手順【html】ボタンの設置
※テキストエリアをname属性を設定した<form>〜</form>内に記述します
※初期値(オープン時)はスクロールバーは表示です
-----次の行から(copy)-----
<form name="FORM12b">
<input type="button" name="btn_12a" value="表示"
 style="background:#808080"
 onclick="document.body.style.overflow='';
       this.style.background='#808080';
       FORM12b.btn_12b.style.background='#c0c0c0'">
<input type="button" name="btn_12b" value="消去"
 onclick="document.body.style.overflow='hidden';
       this.style.background='#808080';
       FORM12b.btn_12a.style.background='#c0c0c0'">
</form>
-----上の行まで(copy)-----

topへ目次へ前へ次へ
【技b004-3】スクロールバーの色を変える
[TextArea]
リンク文字をクッリクして
スクロールバーの色を選択して下さい


すべての設定色を元に戻す
■基本となる色  
  基本色指定:赤 / 基本色選択:任意 / 元に戻す
■スクロールのない部分の色  
  色指定:赤 / 色選択:任意 / 元に戻す
■スクロールバーの表面色  
  色指定:赤 / 色選択:任意 / 元に戻す
■矢印の色  
  色指定:赤 / 色選択:任意 / 元に戻す
■外枠の左と左上の色  
  色指定:赤 / 色選択:任意 / 元に戻す
■外枠の右と右下の色  
  色指定:赤 / 色選択:任意 / 元に戻す
■内側の枠の左と左上の色  
  色指定:赤 / 色選択:任意 / 元に戻す
■内側の枠の右と右下の色  
  色指定:赤 / 色選択:任意 / 元に戻す
※上記例示は、実際に色指定して動作が確認できるようにしていますので、下記の説明とは異なります。ご注意下さい。

■【テキストエリアの設置】
※修飾等のタグは省略しています
-----次の行から(copy)-----
<form name="FORM31">
<textarea rows="5" cols="30" name="txtArea_31" wrap="off">
◇基本色の設定...(省略)
</textarea></form>
-----上の行まで(copy)-----

■【テキストエリアのスクロールバーの色設定】
※例示ではイベントハンドラを使用していますが、あらかじめstyle属性で設定する方法を記述しています
※下記では<form>〜</form>や<textarea〜>の各設定は省略し、style属性の設定のみ記述しています
※各設定は重複しても設定しなくても構いません

◆基本色
<textarea style="scrollbar-base-color:red">

◆スクロールのない部分の色
<textarea style="scrollbar-track-color:red">

◆スクロールバーの表面色
<textarea style="scrollbar-face-color:red">

◆矢印の色
<textarea style="scrollbar-arrow-color:red">

◆外枠の左と左上の色
<textarea style="scrollbar-3dlight-color:red">

◆外枠の右と右下の色
<textarea style="scrollbar-darkshadow-color:red">

◆内側の枠の左と左上の色
<textarea style="scrollbar-highlight-color:red">

◆内側の枠の右と右下の色
<textarea style="scrollbar-shadow-color:red">

■【イベントハンドラによる色変更】
※イベントハンドラの場合は、下記のように記述します(リンク文字をクリックする場合)
※ハイフンがなくって、区切り部分の文字が大文字になることに注意して下さい

<a href="javascript://" onclick="FORM31.txtArea_31.style.scrollbarBaseColor='red';'">基本色指定:赤</a>

topへ目次へ前へ

解説等

◆スクロールバーの色設定はIE5.5以上の限定技です。
◆スクロールバーに任意の色を設定するための技はIE6.0限定技です。
  [技t011]カラーダイアログから任意の色を選択し透明度も変えてみる

keyword

◇scrollbar◇overflow

history

◇(2004.10.22)設置

注意

◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----

access count