html - 如何关闭父窗口的滚动？

Question

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

Here是一个 fiddle 。要获得我描述的效果，请将鼠标悬停在多项选择上并向下滚动(使用触控板、滚轮等)到底部，然后继续滚动。整个页面将滚动。我希望的行为是当您到达选择选项的底部时整个页面不滚动。

Answer 1

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

代码看起来像这样(给你的选择框一个 id selectbox):

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

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

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