jQuery或Javascript - 如何禁用窗口滚动而不溢出:隐藏;

时间:2013-11-06 16:50:16

标签: javascript jquery css scroll

嗨,当我悬停一个元素时,是否可以在不使用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/

7 个答案:

答案 0 :(得分:46)

尝试在除一个

之外的所有节点上处理'mousewheel'事件
$('body').on({
    'mousewheel': function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();
    }
})

演示:http://jsfiddle.net/DHz77/1/

答案 1 :(得分:6)

如果您想要滚动元素以及阻止窗口滚动,这是一个非常有用的功能:

$('.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();
    }
});

申请课程#34; Scrollable"对你的元素而言就是这样!

答案 2 :(得分: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");
    });

答案 3 :(得分:1)

在StackOverflow的另一篇文章中回答了这个问题:Answered

另一种方法是使用:

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

但它可能会阻止某些jquery移动功能正常工作。

答案 4 :(得分:1)

没有外部变量:

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

答案 5 :(得分: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);

答案 6 :(得分:-2)

您可以使用jquery-disablescroll来解决问题:

  • 禁用滚动:$window.disablescroll();
  • 再次启用滚动:$window.disablescroll("undo");

支持handleWheelhandleScrollbarhandleKeysscrollEventKeys