防止页面滚动-禁用拖动

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

这是一个非常基本的修复程序，我将解释为了使它起作用而进行的更改：

1. CSS ：对于叠加层，您实际上不需要嗅探视口尺寸。 只需将其设置为position: fixed top ， left ， bottom和right四个偏移都position: fixed为0强制其填充屏幕：）
2. 标记 ：将所有页面内容包装在容器中，例如<div class="page-wrap"> 。 切换模态框时，此元素设置为固定位置，以防止单击拖动滚动。
3. JS ：
   • 将全局变量设置为fromTop ，我们将使用它来跟踪用户的滚动位置。
   • 当模式框打开时，更新滚动位置。 隐藏body元素的垂直溢出，并垂直转换整个页面内容，即.page-wrap以保留垂直位置
   • 当模式框关闭时，请逆转上述操作：）我决定在.fadeOut()末尾使用回调以防止抽搐。

完成所有这些操作后，您甚至无需阻止滚动事件触发或再听按键事件。 事不宜迟，这是代码（这是功能演示 ）：

var fromTop;

$('.modal_2').click(function(){

    // Disable scroll and fade in modal box
    disable_scroll();
    $('.block_page').fadeIn();
    $('.modal_box').fadeIn();

    // Fetch current scroll position
    fromTop = $(window).scrollTop();

    // Hide overflowing vertical content
    $('body').css({
        'overflow-y': 'hidden'
    });
    $('.page-wrap').css({
        'transform': 'translateY(-'+fromTop+'px)'
    });
});
$('.modal_close').click(function(e){
    e.preventDefault();

    // Enable scroll and fade out modal box
    $('.block_page').fadeOut(function() {
        // Wait for modal box to fade out before reversing things
        // Hide overflowing vertical content
        $('body').css({
            'overflow-y': 'visible'
        });
        $('.page-wrap').css({
            'transform': 'translateY(0)'
        });
        $(window).scrollTop(fromTop);
    });     
    $(this).parent().fadeOut();
    enable_scroll();        

});

概念验证小提琴： http ： //jsfiddle.net/teddyrised/mjq8gv29/

---

更好的是：使用jQuery .block_page元素和父元素上的.block_page动画是否已完成。 如果要为两个元素设置可变的动画持续时间，则这特别重要 ：

$('.modal_close').click(function(e){
    e.preventDefault();

    // Enable scroll and fade out modal box
    $('.block_page').fadeOut();     
    $(this).parent().fadeOut();

    // Use jQuery promises to check if all fadeOut animation has completed
    var p1 = $('.block_page').promise(),
        p2 = $(this).parent().promise();

    // When all animations have completed, reverse effects
    $.when(p1, p2).done(function() {
        // Hide overflowing vertical content
        $('body').css({
            'overflow-y': 'visible'
        });
        $('.page-wrap').css({
            'transform': 'translateY(0)'
        });
        $(window).scrollTop(fromTop);
    });
});

使用jQuery .promise()延迟对象的高级提琴： http : //jsfiddle.net/teddyrised/2rud0aLm/6/

Answer 2

@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();
});

小提琴