web-dev-qa-db-ja.com

jQueryまたはJavascript-オーバーフローなしでウィンドウスクロールを無効にする方法：非表示;

こんにちは、要素をホバーしているときにoverflow:hidden;を使用せずにウィンドウのスクロールを無効にできますか？

私が試した：

$('.chat-content').on('mouseenter',function(){
    $(document).scroll(function(e){
        if(!$(e).hasClass('.chat-content'))
        e.stopPropagation();
        e.preventDefault();
    });
});

つまり、スクロールバーを表示したままにしておきたいのですが、私がマウスでオーバーしている要素からスクロールすると、ウィンドウはスクロールしませんが、オーバーしている要素はスクロールできます

したがって、CSSを使用せずに私が終わっている要素ではなく、本文のスクロールを無効にします

ここに私がやった別の試みがあります： http://jsfiddle.net/SHwGL/

javascriptjquerycssscroll
27
itsme

1つを除くすべてのノードで 'mousewheel'イベントを処理してみてください

$('body').on({
    'mousewheel': function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();
    }
})

デモ： http://jsfiddle.net/DHz77/1/

46
Glen Swift

あなたが上にある要素をスクロールし、ウィンドウがスクロールするのを防ぎたい場合、ここに本当に便利な関数があります：

$('.Scrollable').on('DOMMouseScroll mousewheel', function(ev) {
    var $this = $(this),
        scrollTop = this.scrollTop,
        scrollHeight = this.scrollHeight,
        height = $this.height(),
        delta = (ev.type == 'DOMMouseScroll' ?
            ev.originalEvent.detail * -40 :
            ev.originalEvent.wheelDelta),
        up = delta > 0;

    var prevent = function() {
        ev.stopPropagation();
        ev.preventDefault();
        ev.returnValue = false;
        return false;
    }

    if (!up && -delta > scrollHeight - height - scrollTop) {
        // Scrolling down, but this will take us past the bottom.
        $this.scrollTop(scrollHeight);

        return prevent();
    } else if (up && delta > scrollTop) {
        // Scrolling up, but this will take us past the top.
        $this.scrollTop(0);
        return prevent();
    }
});

クラスに「スクロール可能」クラスを要素に適用すると、それだけです！

6
pmrotule

グレンズのアイデアに続いて、ここでは別の可能性があります。 div内をスクロールできますが、divスクロールが終了すると、bodyがdivとともにスクロールできなくなります。ただし、スクロールが多すぎる場合はpreventDefaultが多すぎるように見え、上にスクロールする場合は遅れが生じます。誰かがそれを修正する提案がありますか？

    $(".scrollInsideThisDiv").bind("mouseover",function(){
       var bodyTop = document.body.scrollTop;
       $('body').on({
           'mousewheel': function(e) {
           if (document.body.scrollTop == bodyTop) return;
           e.preventDefault();
           e.stopPropagation();
           }
       });
    });
    $(".scrollInsideThisDiv").bind("mouseleave",function(){
          $('body').unbind("mousewheel");
    });
2
Fabio Nolasco

tfeはStackOverflowの別の投稿でこの質問に回答しました： Answered

別の方法は以下を使用することです：

$(document).bind("touchmove",function(event){
  event.preventDefault();
});

ただし、jqueryモバイル機能の一部が適切に機能しない場合があります。

1
shat

外部変数なし：

       $('.element').bind('mousewheel', function(e, d) {
            if((this.scrollTop === (this.scrollHeight - this.offsetHeight) && d < 0)
                || (this.scrollTop === 0 && d > 0)) {
                e.preventDefault();
            }
        });
1
egor.xyz

CSSの「修正済み」ソリューション（Facebookのように）：

body_temp = $("<div class='body_temp' />")
    .append($('body').contents())
    .css('position', 'fixed')
    .css('top', "-" + scrolltop + 'px')
    .width($(window).width())
    .appendTo('body');

通常の状態に切り替えるには：

var scrolltop = Math.abs($('.body_temp').position().top);
$('body').append($('.body_temp').contents()).scrollTop(scrolltop);
0
Jeaf Gilbert

このスレッドに関するたくさんの良いアイデア。ページには、ユーザー入力を処理するためのポップアップがたくさんあります。私が使用しているのは、マウスホイールの無効化とスクロールバーの非表示の組み合わせです。

this.disableScrollFn= function(e) { 
    e.preventDefault(); e.stopPropagation() 
};
document.body.style.overflow = 'hidden';
$('body').on('mousewheel', this.disableScrollFn);

この利点は、CSSの位置と上部のプロパティを変更することなく、ユーザーがスクロールするのを可能な限り停止できることです。外に触れるとポップアップが閉じられるため、タッチイベントについては心配していません。

これを無効にするには、ポップアップを閉じるときに次のようにします。

document.body.style.overflow = 'auto';
$('body').off('mousewheel', this.disableScrollFn);

既存のオブジェクト（私の場合はPopupViewModel）にdisableScrollFnへの参照を格納していることに注意してください。これは、disableScrollFnにアクセスするためにポップアップを閉じるときにトリガーされます。

0
Shakus