绝对定位的div，防止背景滚动答案

【问题标题】：Absolute positioned div, prevent background scroll绝对定位的div，防止背景滚动
【发布时间】：2015-09-22 13:38:46
【问题描述】：

我正在使用 Bootstrap 弹出框来显示可能有几页长的动态列表。我只是添加了一个溢出：滚动到它并且它可以工作，但是如果页面比列表长，它会继续滚动超过弹出框。

是否可以在弹出框打开时禁用背景内容的滚动？

换句话说，您可以在禁用背景内容滚动的同时进行绝对定位的 div 滚动吗？

更新：根据两个答案修复了问题

$('#message-preview-trigger').on('show.bs.popover', function () {
    $('body').css('overflow', 'hidden');
});

$('#message-preview-trigger').on('hide.bs.popover', function () {
    $('body').css('overflow', 'visible');       
})

【问题讨论】：

请出示您的代码

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

当模态框打开时，将overflow: hidden; 设置为正文元素，将overflow: auto; 设置为模态对话框。

为了更清楚，我们需要查看您的代码。

【讨论】：

【解决方案2】：

我做了一个非常简单的例子；

Scroll

您的弹出窗口应该在另一个 div 中：

<div id="shadow">
<div id="popup">
    <a id='close' href="#">Close</a>
</div>

然后尝试在根 div 上添加这些 CSS 代码：

#shadow{
display: none;
position: fixed;
top:0;
bottom: 0;
width: 100%;
height:100%;
background-color: rgba(0,0,0,0.6);
}

**然后是 JS 小技巧：**

  $('#open').click(function(e){
   e.preventDefault()
   $('body').width($('body').width());
   $('body').css('overflow', 'hidden');
   $('#shadow').css('display', 'block');
  })
   $('#close').click(function(e){
   e.preventDefault()
   $('body, #shadow').removeAttr('style')
})

希望对你有帮助.....:)

【讨论】：