くりーむわーかー

プログラムとか。作ってて ・試しててハマった事など。誰かのお役に立てば幸いかと。 その他、いろいろエトセトラ。。。

スクロール

Webアプリで全体スクロールをさせないようにする(Jquery使用) その2

以前イベントとかごにょごにょして全体スクロールを止めるものを書いた。

最近、また必要になって、自分で1から作ってる場合はいいんだけど、他のオープンソースのライブラリ使ってる場合に、インベントのバブリングとか追っかけるのが発狂しそうになるので、手っ取り早く無効にする方法。

sample

モーダルウィンドウ(↑の感じのやつ)表示の時に中のコンテンツのスクロールをすると全体スクロールまでいっちゃうのが嫌。すごく嫌。もう一度言うけど、嫌い。

モーダルウィンドウ表示するイベントの処理内で以下を書く。

//スクロールバーごと消す
$("body").css({overflow: "hidden"});

で、だいたい裏の要素クリックでウィンド閉じるとか閉じるボタンで閉じるっていう動きにするのが普通だと思うので、そのイベントで以下を書く。

//スクロールバーを復活させる
$("body").css({overflow: "inherit"});

モーダルウィンドウ表示させてる場合は、これでだいたいうまくいく。

javascriptで画面の全体スクロールさせないようにする

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