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;//これないと効かないブラウザもあった気がする });