如何在父窗口中关闭滚动？

Question

我有一个包含许多选项的<select>框，您可以滚动浏览这些选项。当您滚动到选项列表的底部并继续滚动时，滚动“溢出”到父窗口，然后向下滚动窗口。有没有办法关闭它，即当你滚动到底部向下滚动被禁用？

Here是一个小提琴。为了获得我描述的效果，将鼠标悬停在多个选择上并向下滚动（使用触控板，滚轮等）到底部，然后继续滚动。整个页面将滚动。我想要的行为是当你到达选择选项的底部时整个页面不滚动。

Answer 1

实现您想要的唯一方法是使用javascript。逻辑很简单，在hover上，您可以将overflow: hidden;添加到正文，然后在select元素的onblur上删除overflow值。

代码看起来像这样（给你的选择框一个id为selectbox）：

document.getElementById('selectbox').onmouseenter = function(){
    document.body.style.overflow = 'hidden';
};

document.getElementById('selectbox').onmouseout = function(){
    document.body.style.overflow = 'auto';
};

demo：http://jsfiddle.net/LRCKn/6/ - 你只需要让它在选项元素上应用css更改。