防止页面滚动 – 禁用拖动

防止滚动脚本

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

小提琴

Answer 2

这是一个相当基本的修复，我将解释我已经改变了什么以使其工作：

1. CSS ：对于叠加层，您实际上不需要嗅探视口尺寸。 只需设置到position: fixed所有四个偏移， top ， left ， bottom和right设置为0将强制它填满屏幕:)
2. 标记 ：将所有页面内容包装在容器中，例如

   。 在切换模态框时，此元素设置为固定位置，以防止单击拖动滚动。

3. JS ：
   • 将一个全局变量设置为fromTop ，我们将使用它来跟踪用户的滚动位置。
   • 打开模态框时，更新滚动位置。 隐藏body元素的垂直溢出，并垂直翻译整个页面内容，即.page-wrap以保留垂直位置
   • 当模态框关闭时，反转我们上面做的:)我决定在.fadeOut()的末尾使用回调来防止抽搐。

完成所有这些操作后，您甚至无需阻止滚动事件触发或再次收听按键事件。 不用多说，这里是代码（这里是function演示 ）：

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

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

---

更好的是：使用jQuery promises检查.block_page元素和父元素上是否已完成fadeOut动画。 如果要为任一元素设置可变动画持续时间，这一点非常重要 ：

 $('.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/