スクロール量の取得

  • 投稿日:
  • by
  • カテゴリ:

昔のフルフラ的な感じでJSごりごりするときに
スクロールさせないでスクロール量のみ利用する場合
のサンプルコード。

PCの場合は、スクロールをキャンセルしないと
chromeで少しコンテンツが動いちゃったので
preventDefaultで回避。

//PCスクロール//////////////////////////////////////////////////////////
$(target).mousewheel(function(event, delta) {
//スクロールキャンセルでchromeの少し動くの防止
event.preventDefault();

if (delta > 0) {
wheelY--;
} else if (delta < 0) {
wheelY++;
}
if(wheelY<0) wheelY=-1;
//Debugger.log("スクロール:"+wheelY);
$("#scroll").text("スクロール量:" + wheelY); //追加
});

//スマホスクロール//////////////////////////////////////////////////////
$(target).bind("touchstart touchmove touchend", touchHandler);
function touchHandler(e) {
//これあるとタッチが機能しない
//e.preventDefault();
var touch = e.originalEvent.touches[0];

if (e.type == "touchstart") { // 画面にタッチした
startY = diffY = 0;
//タッチ開始時のY座標
startY = touch.pageY;
} else if (e.type == "touchmove") { // 画面をスライドした
e.preventDefault();
//スライド時のY座標 - 開始時のY座標 = 移動距離( diffY )
diffY = touch.pageY - startY;
if (diffY >0) { // 下に100px以上移動したか
wheelY--;
} else if (diffY <0) { // 上に100px以上移動したか
wheelY++;
} else {
return false;
}
} else if (e.type == "touchend") { // 画面から指を離した

} else {
return false;
}
if(wheelY<0) wheelY=-1;
$("#scroll").text("スクロール量:" + wheelY); //追加
}


参考
http://black-flag.net/jquery/20140312-5031.html