頁面滾動停止在<select multiple>元素

我在滾動的頁面上有一個標準的<select multiple>...</select>選項列表。在滾動文檔時，特別是使用觸控板時，一旦指針位於<select>元素上，頁面將停止。頁面滾動停止在<select multiple>元素

我懷疑由於multiple屬性，元素控制指針，所以它的選項列表可以滾動通過。但是，我故意顯示所有可用的選項，所以我想以某種方式防止滾動覆蓋行爲。

我注意到-webkit-appearance: listbox;用於選擇倍數，而它是menulist用於單個選擇。我試着玩pointer-events CSS屬性，但它導致選項列表變得不可選。

除轉換爲單選按鈕外，還有其他建議嗎？

更新感謝btevfik，我現在注意到這個問題直接歸因於具有滾動溢出固定高度的表格。

有什麼辦法來防止這種行爲發生溢出的內容？

歧路Fidddle：http://jsfiddle.net/tv8ZT/4/

來源

2013-03-16 Quantastical

我能夠覆蓋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 - 但我的目的，這就夠了。

來源

2013-03-17 17:43:13 Quantastical

如何使用 '尺寸' 屬性？

<select multiple size="8">

檢查此撥弄http://jsfiddle.net/tv8ZT/2/

來源

2013-03-16 04:28:44 btevfik

嗯......你的例子確實有效，所以我的代碼中的其他東西一定會導致這種行爲。 – Quantastical 2013-03-16 05:29:12

@MrSlayer會爲你工作http://jsfiddle.net/tv8ZT/5/ – btevfik 2013-03-16 06:00:47

我寧願使用驗證的代碼。在正確平衡標籤之後，問題仍然存在http://jsfiddle.net/tv8ZT/6/ – Quantastical 2013-03-16 14:09:36

頁面滾動停止在<select multiple>元素

回答

相關問題