ホームページ > ウェブフロントエンド > jsチュートリアル > JSとJQUERYでページサイズ、スクロールバー位置、要素位置を取得(サンプルコード)_jquery

JSとJQUERYでページサイズ、スクロールバー位置、要素位置を取得(サンプルコード)_jquery

WBOY
リリース: 2016-05-16 17:09:04
オリジナル
901 人が閲覧しました

JS と jquery はページ サイズ、スクロール バーの位置、要素の位置を取得します

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

// ページの位置とウィンドウ サイズ

function GetPageSize() {
var scrW, scrH;
if(window.innerHeight && window.scrollMaxY)
{ // Mozilla
scrW = window.innerWidth window.scrollMaxX; >scrH = window.innerHeight window.scrollMaxY;
}
else if(document.body.scrollHeight > document.body.offsetHeight)
{ // IE Mac 以外のすべて
scrW = document. body.scrollWidth;
scrH = document.body.scrollHeight;
} else if(document.body)
{ // IE Mac
scrW = document.body.offsetWidth; document.body.offsetHeight;
}
var winW, winH;
if(window.innerHeight)
{ // IE を除くすべて
winW = window.innerWidth; window.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight)
{ // IE 6 厳密モード
winW = document.documentElement.clientWidth
winH = document.documentElement; .clientHeight;
} else if (document.body) { // other
winW = document.body.clientWidth;
winH = document.body.clientHeight; // 小さいページの場合合計サイズはビューポートより小さい
var pageW = (scrWvar pageH = (scrHreturn {PageW:pageW, PageH:pageH; 、WinW:winW、WinH:winH};

};

//スクロールバーの位置

function GetPageScroll() {
var x, y; if(window.pageYOffset)
{ / / IE を除くすべて
y = window.pageYOffset;
x = window.pageXOffset;
} else if(document.documentElement && document.documentElement.scrollTop)
{ // IE 6 厳密
y = document.documentElement.scrollTop;
x = document.documentElement.scrollLeft;
} else if(document.body) { // 他のすべての IE
y = document.body.scrollTop; >x = document.body.scrollLeft;
}
return {X:x, Y:y};

}


jquery


ブラウザの表示領域の高さを取得します: $(window).height(); ブラウザの表示領域の幅を取得します: $(window).width(); ドキュメントの高さを取得しますページ: $ (document).height(); ページのドキュメントの幅を取得します: $(document).width();

上からのスクロール バーの垂直の高さを取得します: $(document).scrollTop();
左からのスクロール バーの垂直の幅を取得します: $(document).scrollLeft(); >

要素の位置とオフセットを計算する

offset メソッドは、パック セットの最初の要素のオフセット情報を返す非常に便利なメソッドです。デフォルトでは、ボディに対するオフセット情報です。結果には、top と left という 2 つの属性が含まれます。
offset(options, results)

options.relativeTo 計算されたオフセット位置を基準とした祖先要素を指定します。この要素は相対的または絶対的に配置する必要があります。省略した場合は、本体に対する相対値となります。

options.scroll スクロールバーを含めるかどうか、デフォルトは TRUE options.padding パディングを含めるかどうか、デフォルトは false
options.margin マージンを含めるかどうか、デフォルトは true
options .border 境界線を含めるかどうか、デフォルトは true

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート