HTML でスクロールバーを使用する際のヒントを共有する

今日、牛南ニュースリリースシステムについて学んでいたとき、牛南先生はスクロールバーに関するいくつかの知識について話しました。あまり多くは触れられず、スクロールバーに関する知識の一部だけが関係していました。深く学びたいなら、これだけでは不十分です。自分で関連する知識を集めなければなりません。誰もがよく知っているはずの現象をお話しします。つまり、Webページで何かを削除すると、スクロールバーは、非常に非人道的な方法でページの上部に走るのではなく、削除する前の位置に残っていることがよくあります。では、これはどのように実現されるのでしょうか。実は、方法は非常に簡単です。.aspxソースコードの上部にMaintainScrollPositionOnPostback = "true"を追加するだけです。下の図を参照してください。

上記の現象は、私が Niu Nan ニュース公開システムを学習していたときに遭遇したものです。ここでは、HTML スクロールバーの使用方法に関するその他のヒントをいくつか紹介します。
（１）スクロールバーを非表示にする
<bodystyle="overflow-x:hidden;overflow-y:hidden">
（２）セルやレイヤーにスクロールバーを表示する方法
<divstyle="幅:200px;高さ:200px;オーバーフローx:自動;オーバーフローy:自動;"></div>
（３）JavaScriptはフレーム内のスクロールバーのスタイルを変更します（色の変更、フラット効果への変更など）。
<スタイル>
BODY {SCROLLBAR-FACE-COLOR: #ffcc99;
スクロールバーのハイライト色: #ff0000;
スクロールバーのシャドウの色: #ffffff;
スクロールバー 3DLIGHT カラー: #000000;
スクロールバー矢印の色: #ff0000;
スクロールバートラックの色: #dee0ed;
スクロールバー-ダークシャドウ-色: #ffff00;}
</スタイル>
例:
scrollbar-3dlight-color:color; スクロールバーのライト境界線の色を設定または取得します。
scrollbar-highlight-color:color; スクロールバーの 3D インターフェイスの明るいエッジの色を設定または取得します。
scrollbar-face-color:color; スクロールバーの 3D サーフェスの色を設定または取得します。
scrollbar-arrow-color:color; スクロールバーの方向矢印の色を設定または取得します。スクロールバーが表示されているが使用できない場合、このプロパティは無効です。
scrollbar-shadow-color:color; スクロールバーの 3D インターフェイスの暗いエッジの色を設定または取得します。
scrollbar-darkshadow-color:color; スクロールバーの暗い境界線の色を設定または取得します。
scrollbar-base-color:color; スクロールバーの基本色を設定または取得します。他のインターフェースの色もそれに応じて自動的に調整されます。
scrollbar-track-color:color; スクロールバーのドラッグ領域の色を設定または取得します
述べる：
color は設定するカラーコードです。#FF0000 などの 16 進数、または rgb(255,0,255) などの RGB で指定できます。スクロールバーのスタイルを設定する場合、設定を有効にするためにすべての属性を使用する必要はありません。
（4）JavaScriptでのページ要素の配置
clientX と clientY は、Web ページに対するマウスの現在の位置です。マウスがページの左上隅にある場合、clientX=0、clientY=0 になります。
offsetX と offsetY は、Web ページ上の特定の領域に対するマウスの現在の位置です。マウスがページ上のこの領域の左上隅にある場合、offsetX=0、offsetY=0 になります。
screenX と screenY は、ユーザーの画面全体に対するマウスの位置です。
x、yは現在のブラウザに対するマウスの現在の位置です
scrollLeft: オブジェクトの左境界とウィンドウに現在表示されているコンテンツの左端との間の距離を設定または取得します (スクロールバーの生成により、ページの現在表示されているコンテンツは不確定です)。
scrollTop: オブジェクトの上端とウィンドウに表示されるコンテンツの上端の間の距離を設定または取得します。
left: ページに対するオブジェクトの X 座標。
top: ページに対するオブジェクトのY座標
（５）シールド選択、右クリック等
<body oncontextmenu=self.event.returnValue=falseonselectstart="false を返す">
次の小さな例は、フォームのサイズに応じて自動的に設定されるスクロールバーを実現するものです。

コードをコピー

コードは次のとおりです。

<SPAN スタイル="FONT-SIZE: 18px"><html>
<ヘッド>
<スタイルタイプ="text/css">
  .TopDIV
  { 
     位置:絶対;
     左:130px;
     上部:10px;
     幅:105;
     高さ:30;
     オーバーフロー x:hidden;
     オーバーフローy:auto;
     float: right;
     境界線スタイル:solid;
     境界線の幅:;
     境界線の色:赤
  }
.左DIV
  { 
     位置:絶対;
     左:10px;
     上部:40px;
     幅:120;
     高さ:60;
     オーバーフロー x:hidden;
     overflow-y:hidden;
     float: right;
     境界線スタイル:solid;
     境界線の幅:;
     境界線の色:黄色
  }
.メインDIV
  { 
     位置:絶対;
     左:130px;
     上部:40px;
     幅:120;;
     高さ:80;
     オーバーフロー x:auto;
     オーバーフロー y:auto;
     float: right;
     境界線スタイル:solid;
     境界線の幅:;
     境界線の色:青
  }
</スタイル>
<script type="text/javascript" language="javascript">
関数setStyle()
{
// 145 の原点は LeftDiv の left+width+15 です (15 はスクロールバーの幅です)
document.getElementById("a").style.width=document.body.clientWidth - 145;
//130の原点はLeftDivの左+幅です
document.getElementById("c").style.width=document.body.clientWidth - 130;
// 55 の原点は TopDIV の上端 + 高さ + 15 です (15 はスクロールバーの幅です)
document.getElementById("b").style.height=document.body.clientHeight - 55;
//40の原点はTopDIVのtop+heightです
document.getElementById("c").style.height=document.body.clientHeight - 40;
}
</スクリプト>
 
</head>
<body onresize="setStyle();" onLoad="setStyle();">
 
<div id='a' クラス="TopDIV">
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>
 
<div id='b' クラス="LeftDIV">
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>
<div id='c' onscroll="document.getElementById('b').scrollTop = this.scrollTop;document.getElementById('a').scrollLeft = this.scrollLeft;"
 class="MainDIV">
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>
</本文>
</html>
</SPAN>

スクロールバーの使い方は非常に一般的で、それに関する知識も豊富です。学習とまとめを継続することで、学習能力と効率がある程度向上することを願っています。

<<: Vueの計算プロパティの詳細な説明

>>: モバイルデバイスでのフリーズ問題に対する CSS3 ソリューション (アニメーションパフォーマンスの最適化)