javascript - 防止页面滚动 - 禁用拖动

Question

阻止滚动脚本

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

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

function keydown(e) {
    for (var i = keys.length; i--;) {
        if (e.keyCode === keys[i]) {
            preventDefault(e);
            return;
        }
    }
}

function wheel(e) {
  preventDefault(e);
}

function disable_scroll() {
  if (window.addEventListener) {
      window.addEventListener('DOMMouseScroll', wheel, false);
  }
  window.onmousewheel = document.onmousewheel = wheel;
  document.onkeydown = keydown;
}

function enable_scroll() {
    if (window.removeEventListener) {
        window.removeEventListener('DOMMouseScroll', wheel, false);
    }
    window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
}

用法

调用 disable_scroll(); 禁用页面滚动，调用 enable_scroll() 再次启用滚动。

问题

与 Facebook 模式框不同，您仍然可以单击并拖动页面向下滚动。

JSFiddle

链接:http://jsfiddle.net/2rud0aLm/

Answer 1

@Terry 的第一句话提供了一个快速的解决方案。只需将正文上的 overflow 更改为“隐藏”即可防止滚动。

您还需要跟踪窗口的滚动位置，并在更改 overflow 属性后对其进行设置。

要防止鼠标滚轮拖动，请将 scroll 事件附加到窗口，该事件将 scrollTop 设置为打开模式对话框时窗口的位置:

function disable_scroll() {
  var top= $(window).scrollTop();
  $('body').css({
    overflow: 'hidden'
  });
  $(window).scrollTop(top);
  $(window).on('scroll', function() {
    $(window).scrollTop(top);
  });    
}

function enable_scroll() {
  var top= $(window).scrollTop();
  $('body').css({
    overflow: ''
  });
  $(window).scrollTop(top);
  $(window).off('scroll');
}

因为你代码中的modal_close和modal_2有href="#"，脚本会尝试跳转到页面顶部。您可以使用 preventDefault 来阻止这种情况:

$('a[href=#]').on('click', function(ev) {
  ev.preventDefault();
});

Fiddle