 ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] スクロール位置取得
|
・サイトマップ [Shift-S] |
 |
■ スクロール位置取得：kl_slx/y()
現在のスクロール位置を取得します。
//--------------------------------------
//kl_slx/y()
//返り値：スクロール位置(ピクセル値)
//--------------------------------------
function kl_slx(){
if(KL_NS4 || KL_NS6) return self.pageXOffset;
if(KL_IE4 || KL_OP6) return kl_dbody().scrollLeft;
}
function kl_sly(){
if(KL_NS4 || KL_NS6) return self.pageYOffset;
if(KL_IE4 || KL_OP6) return kl_dbody().scrollTop;
}
<script language="javascript" src="http://www.keynavi.net/files/keynavi_ja.js"></script>
<script language="javascript"><!--
alert("現在のスクロール位置："+kl_slx()+","+kl_sly());
//-->
</script>
function kl_css1compat(){ //標準モードか判定
if(document.compatMode){ return (document.compatMode=="CSS1Compat"); }
return 0;
}
function kl_dbody(){ //標準モードの場合documentElementを返す
if(KL_IE6 && kl_css1compat()) return document.documentElement;
if(document.body) return document.body;
return 0;
}
【スクロール位置取得「kl_slx/y()」＜keynavi_ja.js】
//--------------------------------------
//kl_slx/y()
//返り値：スクロール位置(ピクセル値)
//--------------------------------------
function kl_slx(){
if(KL_NS4 || KL_NS6) return self.pageXOffset;
if(KL_IE4 || KL_OP6) return kl_dbody().scrollLeft;
}
function kl_sly(){
if(KL_NS4 || KL_NS6) return self.pageYOffset;
if(KL_IE4 || KL_OP6) return kl_dbody().scrollTop;
}
kl_dbody()とは。。。
IE6ではスタイルシートが標準モードの場合 「document.body」の代わりに「document.documentElement」を使う必要が ある為、この関数で被せています。
参考：IE6の標準モードと「document.body」属性 (このページ内)
IE6ではスタイルシートが標準モードの場合 「document.body」の代わりに「document.documentElement」を使う必要が ある為、この関数で被せています。
参考：IE6の標準モードと「document.body」属性 (このページ内)
【スクロール位置取得サンプル】
<script language="javascript" src="http://www.keynavi.net/files/keynavi_ja.js"></script>
<script language="javascript"><!--
alert("現在のスクロール位置："+kl_slx()+","+kl_sly());
//-->
</script>
このページをスクロールしてみて 下記のスクリプトを実行してみて下さい。
IE6の標準モードと「document.body」属性
一般にHTMLの冒頭に以下のような宣言を加えるとスタイルシートが 標準モードになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html4/loose.dtd"><br>
他にも同工異曲の宣言が幾つもあり混乱します。。。
IE6では標準モードの場合、 「document.body」の属性取得で不適切な値が返されることがあります。
document.body.clientWidth/clientHeight/scrollWidth/scrollHeight などなど。
下記のスクリプトでは標準モードか否かを判定し 標準モードの場合は 「document.body」の代わりに「document.documentElement」を返します。
【document.bodyと同等オブジェクトの取得＜keynavi_ja.js】
function kl_css1compat(){ //標準モードか判定
if(document.compatMode){ return (document.compatMode=="CSS1Compat"); }
return 0;
}
function kl_dbody(){ //標準モードの場合documentElementを返す
if(KL_IE6 && kl_css1compat()) return document.documentElement;
if(document.body) return document.body;
return 0;
}
「document.body」関係の属性を取得する場合は直接「document.body.属性名」と 書くのではなく 常に「kl_dbody().属性名」とすると簡単に対応できます。
IE6,Netscape7,Opera7で上のコマンドを実行すると標準モードの場合「CSS1Compat」、
互換モードの場合「BackCompat(IE6/Netscape7/Mozilla1.2等)」
「QuirksMode(Opera7)」が返されます。
その他の未対応ブラウザでは「undefined」が返されます。
|
【JavaScript@Keynavi.Net ：
ナビゲーション編
】
「Ctrl-矢印」でフォーカスを上下左右に移動できます。
|
| トップへ戻る [1] | Back[Q] ・Top[W] ・Up[E] ・PgUp[R] ・Focus[Ctrl-矢印] |
|
|
ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] スクロール位置取得
|
・サイトマップ [Shift-S] |