Webで入力する時、例えばテキストエリアとかみたいなので、ホイールクリクリしてエリア内のスクロールだけ動かしたいんだけど、一番上とか下まで行くと、そのまま全体スクロールされる。
個人的にこの動きがホント嫌い。いらっとする。なので、特定のDOM内でスクロールしてる時は全体スクロールさせないためのスクリプト。jqueryとmousewheel.jsを使用。DOM内のスクロールは自分でやらないとダメ。
$('textarea[name=test]').mousewheel(function(event, delta, deltaX, deltaY){
scrLen = 40
$targetElm = $(this)
if (deltaY < 0){
$targetElm.scrollTop($targetElm.scrollTop()+scrLen);
} else {
$targetElm.scrollTop($targetElm.scrollTop()-scrLen);
}
//ホイールイベントをここで止める(スクロールを止める)
if (event.preventDefault) {
event.preventDefault();
}
event.returnValue = false;//これないと効かないブラウザもあった気がする
});
mousewheel.jsが便利。とても便利。
ちなみに、mousewheel.jsが無い版はこんな感じ。
var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
$("#hoge").on(mousewheelevent,function(e){
scrLen = 30;
var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
var $targetElm = $(this);
if (delta < 0){
$targetElm.scrollTop($targetElm.scrollTop()+scrLen);
} else {
$targetElm.scrollTop($targetElm.scrollTop()-scrLen);
}
//ホイールイベントをここで止める(スクロールを止める)
if (e.preventDefault) {
e.preventDefault();
}
e.returnValue = false;//これないと効かないブラウザもあった気がする
});