Javascript 页面滚动停止在<；选择多个>；要素

我在滚动页面上有一个标准的

…

选项列表。当在文档中滚动时，尤其是使用触控板时，一旦指针指向

元素，页面就会停止

我怀疑，由于

multiple

属性，元素控制指针，因此它的选项列表可以滚动。但是，我故意显示所有可用的选项，所以我想以某种方式防止滚动覆盖行为

我注意到

-webkit的外观：listbox

用于选择多个，而对于单个选择，它是

menulist

。我尝试使用

指针事件

CSS属性，但它会导致选项列表变得不可选择

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

更新 多亏了btevfik，我现在注意到这个问题直接归因于表单具有固定高度和滚动溢出

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

---

分叉的fiddle:

使用“size”属性怎么样

<select multiple size="8">

---

选中此小提琴

我能够覆盖

选择[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;
        };
    }
}

var-selects=document.getElementsByTagName（'select'）；
对于（变量i=0，len=selects.length；i

---

对于完全的浏览器兼容性，可能还有一些额外的要求——比如使用

event.detail

而不是

event.wheelDelta

——但就我而言，这就足够了。

Hmm……您的示例确实有效，所以我的代码中一定有其他内容导致了这种行为。我更喜欢使用验证的代码。在正确地平衡了标签之后，问题仍然存在，而理论上，这确实有效，只是一个没有实际停止行为的黑客行为。它只是假设

表单

后面的内容足够大，可以从光标下方滚动

选择

，并产生创建多个滚动条的副作用。为什么你需要在表单上自动溢出？那么，只需删除它。设计要求它包含在一个可滚动区域内。假设我不能更改HTML代码，只能使用CSS或JavaScript来解决问题。