代码之家 › 专栏 › 技术社区 › jeffjenx

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

scroll webkit css html javascript

4

jeffjenx · 技术社区 · 13 年前

我有一个标准 <select multiple>...</select> 滚动页面上的选项列表。当滚动文档时,特别是使用触控板时,一旦指针位于 <select> 要素

我怀疑是因为 multiple 属性,元素控制指针,因此可以滚动它的选项列表。然而,我有目的地显示所有可用的选项,所以我想以某种方式防止滚动覆盖行为。

我注意到了 -webkit-appearance: listbox; 用于选择倍数,而 menulist 用于单个选择。我试着和 pointer-events CSS属性,但它会导致选项列表变得不可选择。

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

使现代化 多亏了btevfik,我现在注意到这个问题直接归因于具有固定高度和滚动溢出的表单。

有什么方法可以防止这种行为发生在溢出的内容上吗?

叉式Fiddle: http://jsfiddle.net/tv8ZT/4/

2 回复 | 直到 13 年前

1

2

btevfik 13 年前

使用“size”属性怎么样?

<select multiple size="8">

检查一下这把小提琴 http://jsfiddle.net/tv8ZT/2/

2

1

jeffjenx 13 年前

我能够覆盖 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 --但就我的目的而言,这就足够了。