定位在元素上时禁用页面滚动？

Question

让我们说我的页面上有一个弹出窗口，带有一个y滚动条，如屏幕截图所示：

正常情况下，如果我将鼠标悬停在列表上，我可以使用鼠标滚轮向上或向下滚动。当我到达列表的底部时，鼠标滚轮会导致整个页面向下滚动。

是否有一种允许在弹出窗口中滚动的方法，但是当指针位于弹出窗口顶部时阻止页面滚动？

Answer 1

当鼠标悬停在弹出窗口上时，您可以将页面的overflow css属性设置为overflow-y:hidden。

例如，

http://jsfiddle.net/YNZuk/

<强> JS

$(document).ready(function(){

    $('.popup').on('mouseover',function(){$('body').css('overflow-y','hidden');});
    $('.popup').on('mouseout',function(){$('body').css('overflow-y','auto');});

});

<强> HTML

<div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis.....a lot of data...
<div class="popup">
        <b>this is a popup</b><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia,..
</div>
</div>

<强> CSS

.popup{
        background-color:red;
    position:fixed;
    top:50px;
    width:200px;
    height:100px;
    overflow:auto;
}

Answer 2

因为你已经标记了Jquery和Css所以我的建议是你在使用Jquery打开PopUp时给出body,html overflow:hidden;， 并在弹出窗口关闭时将其设为overflow:auto;。 比如这样的东西：

    $('#YourElement').click(function{
    //show popup
    //hide overflow
$('body,html').css('overflow','hidden');
    });

和关闭时类似的东西