Geek Answers Handbook

Page scroll restriction in the <select multiple> element

I have a standard list of options <select multiple>...</select> on the page that scrolls. When scrolling through a document, especially with a trackpad, the page stops when the cursor is over the <select> element.

I suspect that due to the multiple attribute, the element controls the pointer so that it can scroll through the list of options. However, I purposefully show all available options, so I would like to somehow prevent the scrolling behavior.

I noticed that -webkit-appearance: listbox; used for multiple choice, whereas for one choice it is a menulist . I tried playing with the pointer-events CSS attribute, but this makes the list of options not selectable.

Any suggestions besides converting to switches?

Update Thanks to btevfik, I now notice that the problem is directly related to the form having a fixed height with scroll overflow.

Is there a way to prevent this behavior when the content is full?

Forked Fidddle: http://jsfiddle.net/tv8ZT/4/

+4
source share
2 answers

I was able to override the default mousewheel behavior of the select[multiple] elements to scroll through the overflowed element accordingly, without having to change the DOM structure.

After loading the 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; }; } }

There may be some additional requirements for full browser compatibility - for example, using event.detail instead of event.wheelDelta - but for my purposes this will be enough.

+1
source

What about using the 'size' attribute?

 <select multiple size="8">

check this script http://jsfiddle.net/tv8ZT/2/

+2
source

More articles:


All Articles