javascript 滚动div元素时防止页面滚动

Prevent page scrolling while scrolling a div element

提问by FreakSoft

I have already found the solution in the accepted answer here:

我已经在此处接受的答案中找到了解决方案：

How to prevent page scrolling when scrolling a DIV element?

滚动DIV元素时如何防止页面滚动？

But want also to disable scrolling the main page on keys (when div content can't be scrollable anymore).

但还想禁用在键上滚动主页（当 div 内容不能再滚动时）。

I'm trying to make something like this but it's not working:

我正在尝试制作这样的东西，但它不起作用：

$( '.div-scroll' ).bind( 'keydown mousewheel DOMMouseScroll', function ( e ) {
                var e0 = e.originalEvent,
                delta = e0.wheelDelta || -e0.detail;

                this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;

                if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
                    e.preventDefault();
                }
                e.preventDefault();
            });

Any ideas why?

任何想法为什么？

回答by Darren Willows

You can stop the scrolling of the whole page by doing:

您可以通过执行以下操作来停止整个页面的滚动：

Method 1

方法一

<div  onmouseover="document.body.style.overflow='hidden';"  onmouseout="document.body.style.overflow='auto';"></div>

but it makes the browser's scrollbar disappear whenever you hover over the div.

但是当您将鼠标悬停在 div 上时，它会使浏览器的滚动条消失。

Method 2

方法二

Else you can look at jquery-mousewheel.

否则，您可以查看 jquery-mousewheel。

var toolbox = $('#toolbox'),
    height = toolbox.height(),
    scrollHeight = toolbox.get(0).scrollHeight;

toolbox.off("mousewheel").on("mousewheel", function (event) {
  var blockScrolling = this.scrollTop === scrollHeight - height && event.deltaY < 0 || this.scrollTop === 0 && event.deltaY > 0;
  return !blockScrolling;
});

DEMO

演示

Method 3

方法三

To stop the propagation with no plugins.

在没有插件的情况下停止传播。

HTML

HTML

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

JS

JS

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

Method 4

方法四

you can do it by canceling these interaction events:

您可以通过取消这些交互事件来实现：

Mouse & Touch scroll and Buttons associated with scrolling.

鼠标和触摸滚动以及与滚动相关的按钮。

// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

function preventDefaultForScrollKeys(e) {
    if (keys[e.keyCode]) {
        preventDefault(e);
        return false;
    }
}

function disableScroll() {
  if (window.addEventListener) // older FF
      window.addEventListener('DOMMouseScroll', preventDefault, false);
  window.onwheel = preventDefault; // modern standard
  window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
  window.ontouchmove  = preventDefault; // mobile
  document.onkeydown  = preventDefaultForScrollKeys;
}

function enableScroll() {
    if (window.removeEventListener)
        window.removeEventListener('DOMMouseScroll', preventDefault, false);
    window.onmousewheel = document.onmousewheel = null; 
    window.onwheel = null; 
    window.ontouchmove = null;  
    document.onkeydown = null;  
}

回答by Vnuuk

You need to bind document to 'keydown' event like this:

您需要像这样将文档绑定到 'keydown' 事件：

$( document ).bind( 'keydown', function (e) { ... e.preventDefault(); }

回答by Nvan

This code block the scrolling by using keys:

此代码使用键阻止滚动：

$(document).keydown(function(e) {
        if (e.keyCode === 32 || e.keyCode === 37 || e.keyCode === 38 || e.keyCode === 39 || e.keyCode === 40) {
            return false;
        }
});