页面滚动在 <select multiple> 元素上停止答案

【问题标题】：Page scroll stops on <select multiple> element页面滚动在 <select multiple> 元素上停止
【发布时间】：2013-03-16 03:05:47
【问题描述】：

我在滚动的页面上有一个标准的<select multiple>...</select> 选项列表。滚动浏览文档时，尤其是使用触控板时，一旦指针悬停在 <select> 元素上，页面就会停止。

我怀疑由于multiple 属性，该元素控制了指针，因此它的选项列表可以滚动浏览。但是，我有意显示所有可用选项，因此我想以某种方式阻止滚动覆盖行为。

我注意到-webkit-appearance: listbox; 用于多选，而menulist 用于单选。我尝试使用 pointer-events CSS 属性，但它会导致选项列表变得无法选择。

除了转换为单选按钮之外还有什么建议吗？

更新感谢 btevfik，我现在注意到该问题直接归因于具有固定高度且滚动溢出的表单。

有没有办法防止这种行为发生在溢出的内容上？

分叉小提琴：http://jsfiddle.net/tv8ZT/4/

【问题讨论】：

标签： javascript html css webkit scroll

【解决方案1】：

使用 'size' 属性怎么样？

<select multiple size="8">

检查这个小提琴http://jsfiddle.net/tv8ZT/2/

【讨论】：

嗯......你的例子确实有效，所以我的代码中的其他东西一定会导致这种行为。
我更喜欢使用可验证的代码。正确平衡标签后，问题仍然存在jsfiddle.net/tv8ZT/6
虽然理论上这确实有效，但它只是一种黑客行为，实际上并不能阻止这种行为。它只是假设form 之后的内容足够大，可以将select 从光标下方滚动出来，并且具有创建多个滚动条的副作用。 jsfiddle.net/tv8ZT/8
为什么你需要在表单上自动溢出，只需将其删除
该设计要求将其包含在可滚动区域内。假装我无法更改 HTML 代码，只能使用 CSS 或 JavaScript 来解决问题。

【解决方案2】：

我能够覆盖 select[multiple] 元素的默认鼠标滚轮行为以适当地滚动溢出的元素，而无需修改 DOM 结构。

DOM 加载完成后：

var selects = document.getElementsByTagName( 'select' );
for( var i = 0, len = selects.length; i < len; ++i )
{
    if( selects[ i ].hasAttribute( 'multiple' ) )
    {
        selects[ i ].onmousewheel = function( event )
        {
            event.preventDefault( );
            this.form.scrollTop -= event.wheelDelta;
        };
    }
}

对于完整的浏览器兼容性可能还有一些额外的要求——比如使用event.detail而不是event.wheelDelta——但就我的目的而言，这已经足够了。

【讨论】：