まずこのページの下(↓)と右(→)にあるサンプルを見てください。
この例は、
padding-left,padding-right,border-left,border-right,margin-left,margin-rightが無いdivタグの説明をしています。
divタグの高さや、それぞれの幅を50pxにしています。
仮にid="contents"の場合に、下記のような値になります。
$("#contents").height() => 50px
$("#contents").innerHeight() => 150px
$("#contents").outerHeight() => 250px
$("#contents").outerHeight(true) => 350px上から順に高さのみ、padding2つ分、border2つ分、margin2つ分、と増えています。それぞれの幅の説明です。
padding => コンテンツの一部です。
背景色も反映されます。
border => コンテンツの枠線です。
ここもコンテンツの一部です。
一般的に幅は1pxなどの細い線です。
margin => 他のコンテンツとの間を空ける間隔です。
他の間隔と被った場合に長い方のみ有効になる場合があります。
float,positionなどと組み合わせて使うとブラウザ共通、ブラウザ個別(主にIE)、
の両方のパターンで消えたりしますので注意が必要です。
なので背景色と枠線がなければpaddingにする、
もしくは、さらにdivタグで囲んで、そこでpaddingで指定する、
などの場当たり的な対応が必要な場合があります。次にoffset,positionの違いです。
$(outer)の部分はpadding,border,marginを含まない$(contents)を囲むタグです。
position()はmarginを含み、offset()は含みません。
cssのposition(≠jqueryのposition())を指定したタグで囲めば明らかに違うので両方の値を使い分けたほうが良いです。
offset()がページ全体の左上の座標(0,0)からの位置で、position()は上位のタグでcssのpositionを指定しているタグの左上を座標(0,0)とした場合の位置です。
右が下記のようになっているはずですが、
G = 0; // $(contents).position().topこれは表示の互換性のため位置を測っているタグの外側のタグにposition:relative;を指定しているためです。
position()がmarginを含まない場合50になるはずですが0なのでposition()がmarginを含んでいることが確認できます。
別の例として下記の場合、
<body style="margin: 0; padding: 10px;"> <div style="margin: 0; padding: 10px; height: 100px;">...</div> <div style="margin: 0; padding: 10px; position:relative;"> <div style="margin: 0; padding: 10px; height: 1000px;"></div> ここにコンテンツ・・・このようになります。
E = 1211; // $(contents).offset().top => (10) + (10 + 100 + 10) + (10) + (10 + 1000 + 10) + 1 + 50 F = 1161; // $(outer).offset().top => (10) + (10 + 100 + 10) + (10) + (10 + 1000 + 10) + 1 G = 1031; // $(contents).position().top => (10) + (10 + 1000 + 10) + 1 H = 1031; // $(outer).position().top => (10) + (10 + 1000 + 10) + 1position()は3行目のdivタグ(...position:relative;...の行)のpaddingから測っています。
cssのposition:absoluteで指定するような位置を取りたい場合はoffset()を利用するのがお勧めです。
つまりcssの担当とjavascriptの担当が別人の場合jqueryのposition()は使わないのが良いです。
(例えば表示の構成とまったく関係ないブラウザ毎のバッドノウハウでcssのposition指定が入ることがあるためです)
次にスクロール位置の判定の例です。
marginをコンテンツの外であるとして判定しています。
(見やすさのためにタグで囲んで文字と背景色を別のタグで出しています)
borderを含んで全部見えるかどうか？と、borderが1pxでも見えるかどうか？の2種類です。
$("html").scrollTop()、$("body").scrollTop()、の部分は、ブラウザの種類やバージョンかhtmlやcssの構成などで内容が違うためです。
問題ない場合$("html").scrollTop()だけで取れるはずです。
例えばhtml,bodyのoverflowをhiddenでbody直下のdivタグでスクロールする場合などは違います。
contents
margin-top
border-top
padding-top
padding-bottom
border-bottom
margin-bottom
0 件のコメント:
コメントを投稿