jQuery 或 Javascript - 如何在不溢出的情况下禁用窗口滚动：隐藏；

jQuery or Javascript - how to disable window scroll without overflow:hidden;

提问by itsme

Hi is it possible to disable window scrolling without using overflow:hidden;when i'm hover an element?

嗨，overflow:hidden;当我悬停一个元素时，是否可以禁用窗口滚动而不使用？

i tryed :

我试过：

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

i mean, i want to leave visible the scrollbar but when i scroll out of the element i'm over with mouse the window doesn't scrolls, while the element i'm over can scroll

我的意思是，我想让滚动条保持可见，但是当我用鼠标滚动出元素时，窗口不会滚动，而我所在的元素可以滚动

So disable scroll for body but not for element i'm over without using css

所以禁用身体滚动但不是元素我不使用css就结束了

here is another try i did: http://jsfiddle.net/SHwGL/

这是我做的另一个尝试：http: //jsfiddle.net/SHwGL/

回答by Glen Swift

Try to handler 'mousewheel' event on all nodes except one

尝试在除一个节点之外的所有节点上处理“鼠标滚轮”事件

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

Demo: http://jsfiddle.net/DHz77/1/

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

回答by pmrotule

If you want to scroll the element you're over and prevent the window to scroll, here's a really useful function :

如果你想滚动你结束的元素并阻止窗口滚动，这里有一个非常有用的功能：

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

Apply the class "Scrollable" to your element and that's it!

将“Scrollable”类应用于您的元素，就是这样！

回答by Fabio Nolasco

Following Glens idea, here it goes another possibility. It would allow you to scroll inside the div, but would prevent the body to scroll with it, when the div scroll ends. However, it seems to accumulate too many preventDefault if you scroll too much, and then it creates a lag if you want to scroll up. Does anybody have a suggestion to fix that?

遵循格伦斯的想法，这里有另一种可能性。它允许您在 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");
    });

回答by shat

tfe answered this question in another post on StackOverflow: Answered

tfe 在 StackOverflow 上的另一篇文章中回答了这个问题：已回答

Another method would be to use:

另一种方法是使用：

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

But it may prevent some of the jquery mobile functionality from working properly.

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

回答by egor.xyz

Without external variables:

没有外部变量：

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

回答by Jeaf Gilbert

CSS 'fixed' solution (like Facebook does):

CSS 'fixed' 解决方案（就像 Facebook 那样）：

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

to toggle to normal state:

切换到正常状态：

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

回答by Shakus

Plenty of good ideas on this thread. I have a lot of popups in my page for handling user input. What I use, is a combination of disabling the mousewheel and hiding the scrollbar:

在这个线程上有很多好主意。我的页面中有很多用于处理用户输入的弹出窗口。我使用的是禁用鼠标滚轮和隐藏滚动条的组合：

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

Advantage of this is we stop the user from scrolling in any possible way, and without having to change css position and top properties. I'm not concerened about touch events, since touch outside would close the popup.

这样做的好处是我们阻止用户以任何可能的方式滚动，而不必更改 css position 和 top 属性。我不关心触摸事件，因为触摸外部会关闭弹出窗口。

To disable this, upon closing the popup I do the following.

要禁用此功能，请在关闭弹出窗口时执行以下操作。

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

Note, I store a reference to my disableScrollFn on the existing object (in my case a PopupViewModel), for that gets triggered upon closing the popup to have access to disableScrollFn.

请注意，我在现有对象（在我的例子中是 PopupViewModel）上存储了对我的 disableScrollFn 的引用，因为它在关闭弹出窗口时被触发以访问 disableScrollFn。

回答by Thomas

You can use jquery-disablescrollto solve the problem:

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

• Disable scrolling: $window.disablescroll();
• Enable scrolling again: $window.disablescroll("undo");

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

Supports handleWheel, handleScrollbar, handleKeysand scrollEventKeys.

支持handleWheel，handleScrollbar，handleKeys和scrollEventKeys。