 ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] スクロール実行
|
・サイトマップ [Shift-S] |
 |
■ スクロール実行：kl_slto/by()
特定位置へスクロールします。
function kl_slto(x,y){
if(!KL_NS4W) return self.scroll(x,y);
var t=kl_sl_offset(x,y);
return self.scroll(x+t[0],y+t[1]);
}
function kl_slby(dx,dy){
if(!KL_NS4W) return self.scrollBy(dx,dy);
var t=kl_sl_offset(kl_slx()+dx,kl_sly()+dy);
var dx_=dx+t[0]; if(dx_==0 && dx!=0){ dx_=(dx<0 ? -1 : 1); }
var dy_=dy+t[1]; if(dy_==0 && dy!=0){ dy_=(dy<0 ? -1 : 1); }
return self.scrollBy(dx_,dy_);
}
function kl_sl_offset(x,y){
if(!KL_NS4){ return -1; }
var w=document.width -window.innerWidth;
var h=document.height-window.innerHeight;
if(parent.frames.length>0){ w=w-4; h=h-4; } //フレーム時の微調整
var dx=0;
var dy=0;
var st=16; //スクロールバーの巾値
if(h>0) if(w>0) dx=-Math.floor((st*x)/(w+st));
if(w>0) if(h>0) dy=-Math.floor((st*y)/(h+st));
return new Array(dx,dy);
}
【スクロール実行「kl_slto(x,y)」＜keynavi_ja.js】
function kl_slto(x,y){
if(!KL_NS4W) return self.scroll(x,y);
var t=kl_sl_offset(x,y);
return self.scroll(x+t[0],y+t[1]);
}
次は差分スクロールを行う関数の例です。
【スクロール実行「kl_slby(dx,dy)」＜keynavi_ja.js】
function kl_slby(dx,dy){
if(!KL_NS4W) return self.scrollBy(dx,dy);
var t=kl_sl_offset(kl_slx()+dx,kl_sly()+dy);
var dx_=dx+t[0]; if(dx_==0 && dx!=0){ dx_=(dx<0 ? -1 : 1); }
var dy_=dy+t[1]; if(dy_==0 && dy!=0){ dy_=(dy<0 ? -1 : 1); }
return self.scrollBy(dx_,dy_);
}
ちなみにページの最後部への移動「S/L」では「kl_slto_max()」関数をつかえます。 ページ単位のスクロール「R/F」「U/J」は 「kl_slby(dx,dy)」を「dy=+-kl_windowheight()」として実行します。 また頻繁に使われる「PageTop」リンクは 「<a href="#pagetop" onclick="kl_slto(0,0); return false;">PageTop</a>」 とできます(JS無効時も動作)。
ページの先頭にPageTopアンカー<a name="pagetop"></a>を用意し
<a href="#pagetop">PageTop</a>とする方法は
<body>要素にマージンがある(デフォルト)と先頭に戻った時に
若干隙間ができますが、この方法ではOKです。
さて、上記スクリプト(kl_slto(),slby())をみると Windows版Netscapeの場合は「kl_sl_offset()」という関数を利用しています。
Netscape4.xのスクロールバグへの対応
Windows版Netscape4.xでは ブラウザ下部に横スクロールバーが表示されていると 縦スクロール時に「window.scroll/scrollBy」がきちんと動作しません。 ページの下部に行くと移動量が大き過ぎます。縦横逆の場合も同様です。
Linux版、Mac版Netscapeでは起きません。
恐らくは 入力引数から実際の スクロール量を算出する時に下部に表示されるスクロールバーの分を 考慮するのを忘れています。 それをモデル化し1,2px程度の誤差はでますが 以下の関数で スクロール量を補正します。
【スクロール実行「kl_slby(dx,dy)」＜keynavi_ja.js】
function kl_sl_offset(x,y){
if(!KL_NS4){ return -1; }
var w=document.width -window.innerWidth;
var h=document.height-window.innerHeight;
if(parent.frames.length>0){ w=w-4; h=h-4; } //フレーム時の微調整
var dx=0;
var dy=0;
var st=16; //スクロールバーの巾値
if(h>0) if(w>0) dx=-Math.floor((st*x)/(w+st));
if(w>0) if(h>0) dy=-Math.floor((st*y)/(h+st));
return new Array(dx,dy);
}
Netscape4.xで ウィンドウの横巾を小さくし 下部に横スクロールバーを表示させてみて 以下の例を実行してみて下さい。
特にスクロール位置がページ最後部になると 補正無しの場合「self.scrollBy(0,3)」の実行での移動量が大きすぎるのが 分かります。
なんと「self.scrollBy(0,-3)」では上ではなく下に移動してしまいます！
「kl_slby()」を使った場合は補正をかけているのできちんと動作します。
|
【JavaScript@Keynavi.Net ：
ナビゲーション編
】
「Ctrl-矢印」でフォーカスを上下左右に移動できます。
|
| トップへ戻る [1] | Back[Q] ・Top[W] ・Up[E] ・PgUp[R] ・Focus[Ctrl-矢印] |
|
|
ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] スクロール実行
|
・サイトマップ [Shift-S] |