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

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

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

今回は、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 までご連絡ください。