webkit/ie: drop-down with scrollbar disappears when either end of list is reached.

[BCdmcgaffin]

seen on

• OS X Lion with
  • Safari 5.1.2
  • Chrome 16.0.912.75
• WinXP with
  • IE 8.0.6001.18702

OS X/Firefox 9.0.1 is ok

steps to reproduce

1. open drop-down of select box with many items. (this can be reproduced on the Standard Dropdown of the demo site
2. scroll to the bottom or top of the list.

expected result

• list remains visible to allow top or bottom item to be selected.

actual result

• list disappears.

[claviska]

This is intended, as scrolling the page and resizing the window causes positioning issues. What's really happening is the menus are being hidden on $(window).scroll and $(window).resize. Once you reach the top/bottom of the list, the scroll transfers from the control to the window causing it to become hidden as the page scrolls.

This behavior is exactly the same for native SELECT elements in Firefox. Chrome differs because, while a menu is open, the user cannot scroll the page.

The best thing to do would be to fix the positioning issue, but it's not a priority at the moment. If someone is willing to contribute a fix for it, great. Otherwise, this will remain the intended behavior until I can get around to it.

[NotARobit]

I don't believe the scroll transfers to the window on a native select in Firefox or Chrome.

[claviska]

It does in Firefox with the mousewheel and with the scrollbar: http://csnl.net/temp/scrolling.mov

In Chrome, mousewheel scrolling is disabled while a native select is open and, if you drag the scrollbar, the menu closes.

[NotARobit]

The problem is when you scroll while the mouse is positioned over the dropdown. Currently, the menu is closing when you reach the bottom of the list. This is not the native behavior.

[BCdmcgaffin]

Yeah, that's what I'm seeing. Except on Firefox, the menu closes, which would be unexpected and actually makes it pretty hard to select the first or last items in the list.

One thing that I've noticed is that if I switch to 1.0.7, the problem goes away. We have a separate web page using an earlier version of your plugin that does not exhibit this issue.

btw, nice plugin. Thanks for your efforts.

[claviska]

I wonder if removing the $(window).scroll fixes it. I'll have to play around with it unless someone else has time to take a stab at it.

[NotARobit]

I'll look into it.

[NotARobit]

I think I got it. http://www.claytonleis.com/misc/selectbox_fix/

I had to include the jQuery mousewheel plugin to get access to the mouse wheel.

I then added the following near line 141 of jquery.selectBox.js

options.bind('mousewheel', function(event, delta) {
                if( delta > 0 && $(this).scrollTop() == 0) {
                        return false;
                    }
                    var contentsHeight=0;
                    $(this).contents().each( function(){ contentsHeight += $(this).height(); });
                    if( delta < 0 && contentsHeight == $(this).height() + $(this).scrollTop() ) {
                        return false;
                    }
                });

[BCdmcgaffin]

That looks great on both Safari and Chrome. Nice.

[claviska]

I wonder if there's a way to fix the issue without another dependency.

[xenon20]

Anything new on how to fix it without using the mouseover plugin?

[NotARobit]

Well the mousewheel plugin is only 2.4kb uncompressed. It's up to you if you want to use it.

[xenon20]

Well, the work-around doesn't work for me. The fixed page above works fine, but not on my website - maybe because I use ajax calls to get the selectbox data? Might this make any difference?

[pacahon]

manspouse, I test your solution on chrome (mac os) and find a bug. How can I fix this?

1. Open standard dropdown menu and try to scroll up/down list. Work's fine!
2. Select, for example, item 17 (scroll bar on the bottom of list).
3. Reopen menu and try to scroll up - menu is closed

[drywall]

Just want to say thanks to @manspouse for this fix. Note that in current version of selectBox, the code fix needs to get dropped in around line 86.