28

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/

4

8 に答える 8

2

グレンズのアイデアに従って、ここでは別の可能性があります。div 内をスクロールすることはできますが、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");
    });
于 2014-05-02T20:27:42.830 に答える
1

外部変数なし:

       $('.element').bind('mousewheel', function(e, d) {
            if((this.scrollTop === (this.scrollHeight - this.offsetHeight) && d < 0)
                || (this.scrollTop === 0 && d > 0)) {
                e.preventDefault();
            }
        });
于 2015-11-05T13:28:47.860 に答える
0

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

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);

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

于 2015-05-10T03:09:42.267 に答える
0

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);
于 2014-07-12T09:30:05.450 に答える
-1

jquery-disablescrollを使用して問題を解決できます。

  • スクロールを無効にする:$window.disablescroll();
  • スクロールを再度有効にします。$window.disablescroll("undo");

handleWheel、handleScrollbar、handleKeysおよびをサポートしscrollEventKeysます。

于 2016-11-26T23:12:15.917 に答える