ホームページ > 記事 > ウェブフロントエンド > JSとJQUERYでページサイズ、スクロールバー位置、要素位置を取得(サンプルコード)_jquery
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 = (scrW
};
//スクロールバーの位置
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
上からのスクロール バーの垂直の高さを取得します: $(document).scrollTop();
左からのスクロール バーの垂直の幅を取得します: $(document).scrollLeft(); >
要素の位置とオフセットを計算する
offset メソッドは、パック セットの最初の要素のオフセット情報を返す非常に便利なメソッドです。デフォルトでは、ボディに対するオフセット情報です。結果には、top と left という 2 つの属性が含まれます。
offset(options, results)
options.scroll スクロールバーを含めるかどうか、デフォルトは TRUE options.padding パディングを含めるかどうか、デフォルトは false
options.margin マージンを含めるかどうか、デフォルトは true options .border 境界線を含めるかどうか、デフォルトは true