ホームページ > ウェブフロントエンド > jsチュートリアル > js_javascript スキルで固定レイヤーを配置する方法

js_javascript スキルで固定レイヤーを配置する方法

WBOY
リリース: 2016-05-16 16:44:31
オリジナル
1192 人が閲覧しました

ターゲット レイヤーの座標をより柔軟に設定するには、いくつかの HTML オブジェクトの座標を取得する必要があります。ここでは document.body.scrollTop などの属性を使用できますが、これらの属性は標準の xhtml Web ページにあり、より簡単に言えば < を使用します。 ;! DOCTYPE...> タグから取得される値は 0 です。このタグを使用しない場合、xhtml の本体の座標を取得するにはどうすればよいでしょうか。もちろん方法はあります。 document.documentElement を使用して document.body を置き換えます。たとえば、次のように記述できます。

コードをコピーします コードは次のとおりです:

var top=document.documentElement.scrollTop ||document.body.scrollTop; js では

||上記の例は、 if 条件文で使用できるだけでなく、変数の代入にも使用できます。
Copy code コードは次のとおりです。

var top=document.documentElement.scrollTop ?document.documentElement.scrollTop : document.body.scrollTop;
このように書くと良い互換性が得られます。もう 1 つ注意すべき点は、document.documentElement.scrollTop の値が宣言されていない場合、代わりに 0 が表示されることです。



js_javascript スキルで固定レイヤーを配置する方法説明: 現在のページのスクロール バー座標の垂直座標位置を取得するには、
document.body の代わりに
document.documentElement.scrollTop を使用します。 .scrollTop ;
document.documentElement は HTML タグを取得し、
document.body は body タグを取得します。
標準の w3c では、 document.body.scrollTop は常に 0 であるため、 document.documentElement.scrollTop を使用する必要があります。代わりに、
ページに対する相対的なマウスの位置を指定したい場合、ほとんどの検索エンジンは
event.clientX document.body.scrollLeft、event.clientY を使用するように求めます。 document.body.scrollTop;
マウスが想像と異なる場合でも、それは驚くことではありません。IE5.5 では document.body.scrollX オブジェクトがサポートされなくなったため、
文;


コードをコピーします コードは次のとおりです:
if (document.body && document .body.scrollTop &&document.body.scrollLeft)
{
top=document.body.scrollTop;
left=document.body.scrollleft; .documentElement.scrollTop&& document.documentElement.scrollLeft)
{
top=document.documentElement.scrollTop;
left=document.documentElement.scrollLeft;以下にいくつかのパラメータの使用法を説明します。
Web ページの表示領域の幅: document.body.clientWidth;
Web ページの表示領域の高さ: document.body.clientHeight;
Web の表示領域の幅page: document.body.offsetWidth (エッジの幅を含む);
表示される Web ページの領域の高さ: document.body.offsetHeight (エッジの幅を含む);ページ本文: document.body.scrollWidth;
Web ページ本文の完全なテキストの高さ: document.body.scrollHeight;
Web ページが高くスクロールされます: document.body.scrollTop;スクロール中のページ: document.body.scrollLeft;
Web ページの本文の上部: windows.screenTop;
Web ページの本文の左側: windows.screenLeft; .screen.height;
画面の解像度の幅: windows.screen.widht;
使用可能なワークスペースの高さ: windows.screen.availHeight;
使用可能な画面の幅: windows.screen.availWidth;オブジェクトのスクロールの高さを取得します:scrollHeight;
オブジェクトの左端とウィンドウに現在表示されているコンテンツの左端の間の距離を設定または取得します:scrollLeft;オブジェクトの上部とウィンドウ内に表示されているコンテンツの上部:scrollTop;
オブジェクトのスクロール幅を取得します:scrollWidth; レイアウトを基準としたオブジェクトを取得するか、親座標で指定されたオブジェクトを取得します: offsetParent 属性親座標の高さ: offsetHeight;
レイアウトまたは offsetParent プロパティで指定された親座標を基準とした計算されたオブジェクトの左位置を取得します: offsetLeft;または offsetTop プロパティで指定された親座標 Position: offsetTop;
event.clientX: ドキュメントを基準とした水平座標;
event.offsetX: 水平座標コンテナに対する相対値;
event .offsetY: コンテナに対する相対的な垂直座標;
document.documentElement.scrollTop: スクロールの垂直方向の高さを設定します
event.clientX document.documentElement.scrollTop: 垂直方向のスクロール量文書の水平位置を基準としたもの。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート