任何方式来停止页面BEHIND jQuery工具覆盖从滚动？

问题描述：

我使用的是jquery tools overlay，它很棒。但是，滚动行为有点奇怪。如果您打开叠加层并将鼠标置于叠加层上，则如果您位于叠加层的顶部/底部，仍然可以滚动页面。任何方式来停止页面BEHIND jQuery工具覆盖从滚动？

有没有一种方法（最好是一个jQuery的工具内置的方式），以防止页面BEHIND覆盖从滚动？

答

未使用jquery工具，但是当显示ui对话框时，通常会执行以下操作来防止屏幕滚动。

$("body").css("overflow", "hidden");

您还可以将事件添加到窗口滚动，防止滚动，因为这SO answer介绍，也该article

这将触发这使得页面转换一个小的滚动条，但它是可以接受的。 – Dty 2011-07-11 02:23:23

@Dty当然，但另一种选择是将一个处理程序挂接到窗口滚动事件，并在被触发时返回到原始位置。隐藏滚动条是我认为的两个恶意中较小的一个！ – redsquare 2011-07-11 05:53:55

答

只是看了一下这个。你不能阻止底层页面滚动，但你可以防止你的OVERLAY滚动它...毕竟这是需要专注的权利？

尝试将覆盖的div设置为CSS @media screen作为fixed。

我相信默认行为（IE除外）是为了保持固定。而实际上它是我不想滚动的页面。如果这样做会导致我的用户感到困惑。 – Dty 2011-06-08 10:46:44

实际上，在覆盖层可见时，您可以将固定CSS临时应用于背景页面，并在关闭时将其删除。正如你正在使用Jquery，你可以通过在你的body上创建一个具有固定参数的类，然后使用'.addClass（）'来应用它和'.removeClass（）'。 – T9b 2011-06-08 13:44:32

谢谢你，但它会在页面上移动东西。 @redsquare解决方案有点清洁，所以我就这么做了。 – Dty 2011-07-11 02:24:17

答

.modal { 
    //your other settings 
    position:absolute !important; 
}

将此添加到CSS以将模式窗口修复到背景。如果模态窗口大于屏幕，整个页面当然会滚动（包括模态窗口和背景）。

答

在这里你去：

$(function() { 
     $("#element").overlay({ 
      mask: { 
      color: '#000', 
      loadSpeed: 200, 
      opacity: 0.7 
     }, 
     closeOnClick: true, 
     onLoad: function() { 
      $("body").css("overflow", "hidden"); 
     }, 
     onClose: function() { 
      $("body").css("overflow", ""); 
     } 
    }); 
});

这对我很好。 – 2013-10-09 22:36:40

任何方式来停止页面BEHIND jQuery工具覆盖从滚动？

相关推荐