ホームページ > 記事 > ウェブフロントエンド > HTML でスクロールバーを使用するためのヒントは何ですか?

HTML でスクロールバーを使用するためのヒントは何ですか?

php中世界最好的语言オリジナル: 2018-02-12 10:15:342649ブラウズ

今回は、HTML でスクロールバーを使用するためのヒントと、HTML でスクロールバーを使用するための注意事項をいくつか紹介します。実際の事例を見てみましょう。

よくある現象として、Web ページ上で何かを削除するときに、スクロールバーがページの先頭に移動せず、削除前の位置に留まることがよくありますが、これは非常に非人道的です。実際、この方法は非常に簡単で、MaintainScrollPositionOnPostback = "true" を .aspx ソースコードの先頭に追加するだけです。

上記の現象は、ビーフブリスケットのニュースリリースシステムを学習しているときに発生しました。HTML スクロールバーの使用に関するその他のヒントを共有しましょう
(1) スクロールバーを非表示にする

<bodystyle="
overflow-x
:hidden;overflow-y:hidden">

(2) セルにスクロールバーを追加する方法レイヤーにスクロールバーが表示されます

<divstyle="width:200px;height:200px;overflow-x:auto;overflow-y:auto;"></div>

(3) JavaScriptは、色の変更、フラット効果への変更など、フレーム内のスクロールバーのスタイルを変更します

<STYLE> 
BODY {SCROLLBAR-FACE-COLOR: #ffcc99; 
SCROLLBAR-HIGHLIGHT-COLOR: #ff0000; 
SCROLLBAR-SHADOW-COLOR: #ffffff; 
SCROLLBAR-3DLIGHT-COLOR: #000000; 
SCROLLBAR-ARROW-COLOR: #ff0000; 
SCROLLBAR-TRACK-COLOR: #dee0ed; 
SCROLLBAR-DARKSHADOW-COLOR: #ffff00;} 
</STYLE>

手順:

scrollbar- 3dlight-color:color; スクロールバーのハイライト境界線の色を設定または取得します。
scrollbar-face-color:color;または、スクロールバーの 3D サーフェイスの色を取得します。
scrollbar-arrow-color:color; スクロールバーが表示されていても使用できない場合、このプロパティは無効です。 -color:color; スクロールバーの暗い境界線の色を設定または取得します。
scrollbar-base-color:color;スクロールバーの基本色。他のインターフェイスの色もそれに応じて自動的に調整されます。
scrollbar-track-color:color; スクロールバーのドラッグ領域の色を設定または取得します
備考:
color は、#FF0000 などの 16 進数、または次の形式で表すことができます。 RGB、たとえば rgb(255,0,255); スクロールバースタイルを設定する場合、それを有効にするためにすべての属性を使用する必要はありません。
(4) JavaScript でのページ要素の位置
clientX、clientY は、マウスがページの左上隅にある場合、clientX=0、clientY=0; です。、offsetY は、ウェブページに対するマウスの現在の位置です。マウスがページ上のこの領域の左上隅にある場合、offsetX=0、offsetY=0。ユーザーの画面全体を基準としたマウスの位置です。
x、y は、ブラウザーの現在の位置を基準としたマウスの現在位置です。
scrollLeft: オブジェクトの左端とオブジェクトの左端の間の距離を設定または取得します。ウィンドウ内に現在表示されているコンテンツ (スクロールバーが生成されるため、ページ上に現在表示されているコンテンツは不確かです)。
scrollTop: オブジェクトの上部とウィンドウ内の表示コンテンツの上部の間の距離を設定または取得します。
左: ページを基準としたオブジェクトの X 座標。
上: ページに対するオブジェクトの Y 座標
(5) シールド選択、右クリックなど
e7c15a6d2a6eef7f0c3cd4b67aaf994b例はスクロールの実装です。バーはフォームのサイズに応じて自動的に設定されます

<SPAN style="FONT-SIZE: 18px"><html> 
<head> 
<style type="text/css"> 
  .TopDIV 
  {  
     position:absolute; 
     left:130px; 
     top:10px; 
     width:105; 
     height:30; 
     overflow-x:hidden; 
     overflow-y:auto; 
     float: right; 
     border-style.:solid; 
     border-width:; 
     border-color:red 
  } 
  .LeftDIV 
  {  
     position:absolute; 
     left:10px; 
     top:40px; 
     width:120; 
     height:60; 
     overflow-x:hidden; 
     overflow-y:hidden; 
     float: right; 
     border-style.:solid; 
     border-width:; 
     border-color:yellow 
  } 
  .MainDIV 
  {  
     position:absolute; 
     left:130px; 
     top:40px; 
     width:120;; 
     height:80; 
     overflow-x:auto; 
     overflow-y:auto; 
     float: right; 
     border-style.:solid; 
     border-width:; 
     border-color:blue 
  } 
</style> 
<script type="text/javascript" language="javascript"> 
function setStyle() 
{ 
//145的由来LeftDiv的left+width+15（15是滚动条的宽度） 
document.getElementById("a").style.width=document.body.clientWidth - 145; 
//130的由来LeftDiv的left+width 
document.getElementById("c").style.width=document.body.clientWidth - 130; 
//55的由来TopDIV的top+height+15（15是滚动条的宽度） 
document.getElementById("b").style.height=document.body.clientHeight - 55; 
//40的由来TopDIV的top+height 
document.getElementById("c").style.height=document.body.clientHeight - 40; 
} 
</script> 
  
</head> 
<body onresize="setStyle();" onLoad="setStyle();"> 
  
<div id=&#39;a&#39; class="TopDIV"> 
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
</div> 
  
<div id=&#39;b&#39; class="LeftDIV"> 
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
</div> 
<div id=&#39;c&#39; onscroll="document.getElementById(&#39;b&#39;).scrollTop = this.scrollTop;document.getElementById(&#39;a&#39;).scrollLeft = this.scrollLeft;" 
 class="MainDIV"> 
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
</div> 
</body> 
</html>

スクロールバーの使用は非常に一般的であり、それに関する関連知識がかなりたくさんあるので、引き続き学習できることを願っています。学習能力と学習能力を向上させるためにまとめます。
これらの事例を読んだ後は、方法を習得したと思います。さらに興味深い情報については、php の他の関連記事に注目してください。中国語のサイトです！
関連読書:

入力テキストボックスと画像検証コードを実装する方法

html マウスホバープロンプトを実装する方法ラベルコンテンツ

クリックせずにファイルタイプ入力を実現するトリガーメソッドを使用する方法ファイル選択ダイアログボックスが表示されます

以上がHTML でスクロールバーを使用するためのヒントは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：入力テキストボックスと画像検証コードの作成方法次の記事：入力テキストボックスと画像検証コードの作成方法

続きを見る

HTML でスクロール バーを使用するためのヒントは何ですか?

関連記事

HTML でスクロールバーを使用するためのヒントは何ですか?