ページのMouseスクロール（Mouseホイール)
マウスを動かすだけで、このページを上下にスクロールできます。
マウスを動かすだけで、このページを上下にスクロールできます。
Sample Source......................................................................>>>
<script language="JavaScript"><!--
document.onmousedown=mDown;
document.onmousemove = PageDrag;
document.onmouseup = mUp;
var flg = 0; //ﾏｳｽの操作方法を選択するｵﾌﾟｼｮﾝ値
var mouse_d = false; //mouseDownされたかどうかを識別するﾌﾗｸﾞ変数
var ym1,ym2,yd1,yd2; //mouseMove時とmouseDown時のy座標
function Option(o){
flg = o;
//ﾗｼﾞｵﾎﾞﾀﾝで"ﾏｳｽを動かすだけでｽｸﾛｰﾙ"が選択された場合、現在のﾏｳｽy座標を取得
if(o == 1)ym1 = event.y;
}
function mDown(){ //ﾍﾟｰｼﾞ内をmouseDownした時
mouse_d = true;
yd1 = event.y; //mousedown位置のy座標を取得
}
function mUp(){ //ﾍﾟｰｼﾞ内でmouseUpした時
mouse_d = false;
}
function PageDrag(){
if(flg == 1){ //ﾗｼﾞｵﾎﾞﾀﾝで"ﾏｳｽを動かすだけでｽｸﾛｰﾙ"が選択された場合
ym2 = event.y; //mousemove位置のy座標を取得
scrollBy(0,ym2-ym1);//mousedownとmousemove位置のy座標差だけﾍﾟｰｼﾞを移動する
ym1 = ym2; //現在のmousemove時のy座標を直前値として記憶する
}else if(flg == 2){ //ﾗｼﾞｵﾎﾞﾀﾝで"ﾏｳｽをﾄﾞﾗｯｸﾞしてｽｸﾛｰﾙ"が選択された場合
if(mouse_d){ //mouseDownされた場合だけ
yd2 = event.y; //mousemove位置のy座標を取得
scrollBy(0,yd2-yd1);//mousedownとmousemove位置のy座標差だけﾍﾟｰｼﾞを移動する
yd1 = yd2; //現在のmousemove時のy座標を直前値として記憶する
}
}
event.returnValue = false;//ｲﾍﾞﾝﾄの標準動作を無効する
event.cancelBubble = true;//このｲﾍﾞﾝﾄがｲﾍﾞﾝﾄ階層を浮上(bubble up)するのを停止
}
//--></script>
</head>
<body>
<form name="form1">
マウスの操作方法を選択できます。
<input type="radio" name="op" value="0" checked onclick="Option(this.value)">
マウスでスクロールしない <br>
<input type="radio" name="op" value="1" onclick="Option(this.value)">
マウスを動かすだけでスクロール(mouseMoveだけで) <br>
<input type="radio" name="op" value="2" onclick="Option(this.value)">
マウスをドラッグしてスクロール(mouseDown + mouseMoveで）
</form>
end(最終更新:12/11/12)