Stop page from scrolling if hovering div [duplicat

问题:

This question already has an answer here:

• Prevent scrolling of parent element when inner element scroll position reaches top/bottom? [duplicate] 30 answers

I have a div that is scrollable, but whenever you reach the bottom/top of it, it begins to scroll the entire page. That could be annoying for users who scroll fast, and then the entire page starts scrolling unexpectedly.

I need something where if you are hovering over the div, the page is not scrollable.

I have tried this by adding CSS when I hover the div...

body {
    overflow:hidden;
}

...It works but there is one problem. The scrollbar disappears and that looks kind of stupid to have it disappearing/reappearing. Any way to achieve the same effect but keep the scrollbar visible? I have seen it done with Facebook chat.

回答1:

Here is a very simple way to stop the propagation with no plugins, just jQuery.

Update: The code has been updated to work correctly in IE9+. Have not tested in previous versions.

First, create a class on your <div> to mark it as having this behavior. In my example, I use the class .Scrollable.

<div class="Scrollable">
  <!-- A bunch of HTML here which will create scrolling -->
</div>

The jQuery to disable is:

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

In essence, what this does is to detect which direction the scrolling is being requested in (based on the originalEvent.wheelDelta: positive = up, negative = down). If the requested delta of the mousewheel event would move scrolling past the top or bottom of the <div>, cancel the event.

In IE, especially, scrolling events which go past a child element's scrollable area then roll up to parent elements, and the scrolling continues regardless of the event being canceled. Because we cancel the event in any case, and then control the scrolling on the child through jQuery, this is prevented.

This is loosely based on the way that this question solves the problem, but does not require the plugin, and is cross-browser compliant with IE9+.

Here is a working jsFiddle demonstrating the code in-action.

Here is a working jsFiddle demonstrating the code in-action, and updated to work with IE.

Here is a working jsFiddle demonstrating the code in-action, and updated to work with IE and FireFox. See this post for more details about the necessity of the changes.

回答2:

maybe have a look to

How to disable scrolling temporarily?

This is a sample to stop and activate scroll