Siderite's Blog

and has 12 comments
I've updated this page a few times, adding more optimizations, so get the last version.

I was asked to find a way to maintain the vertical scroll in a selection box (that is a select html element with a size bigger than 1). I checked to see what property was changing when I was scrolling the select and I noticed that scrollTop was the one. So I used 
sel.scrollTop=value;
.

Well, this works fine in FireFox and apparently works fine in IE7, too. However, in Internet Explorer 7, if you click on the up/down arrows of the select scrollbar, the scroll resets to 0. Worst than that, in IE6 you can't even set the scrollTop property. You don't get an error, but it doesn't work.

One suggested solution for people that tried the same thing is to set the size attribute to the number of options, thus getting rid of the select scrollbar, and place the select in a div with fixed height and overflow auto. It will look like a select listbox, but the scroll will be from the div and easily changed. I didn't choose this solution, basically because I felt it was cheating.

So, I've applied another solution, one that changes the selected item so that the select element scrolls itself to a position as close to the desired vertical scroll position as possible. Then, I set the scrollTop property, so that it goes at that exact position in IE7 and FireFox. If one clicks the up/down scroll arrows in IE7, the scroll position resets to the one found by the selectedIndex, not 0. And it works in IE6, too.

Here is the code:
JS Code - vertical scroll a select element
function setSelectVerticalScroll(sel,y) {
 if (!sel||(sel.options.length==0)) return;

 // remember the selectedIndex (for single selection selects)
 var selectedIndex=sel.selectedIndex;

 // find the item that selected will yield 
 // the best match for the required scrollTop
 var best=-1; var bestMatch=100000;

 // try to guess the starting index based on select height
 var optionHeight=parseInt(sel.size)
  ?parseInt(sel.offsetHeight)/(parseInt(sel.size)+0.0)
  :parseInt(sel.offsetHeight);
 var startIndex=parseInt(y/optionHeight);
 if (startIndex>=sel.options.length) startIndex=sel.options.length-1;
 var c=startIndex;
 while (c<sel.options.length) {
  var selected=sel.options[c].selected;
  sel.options[c].selected=false;
  sel.options[c].selected=true;
  if (Math.abs(parseInt(sel.scrollTop)-y)<bestMatch) {
   bestMatch=Math.abs(parseInt(sel.scrollTop)-y);
   best=c;
  }
  sel.options[c].selected=selected;
  // best match has been found, no point of going further
  if (Math.abs(parseInt(sel.scrollTop)-y)>bestMatch) break;

  // try to jump to the right index
  var inc=parseInt((y-parseInt(sel.scrollTop))/optionHeight);
  c+=(inc>0?inc:1);
 }

 // select best match, to force scrolling
 if (best>=0) {
  var selected=sel.options[best].selected;
  sel.options[best].selected=false;
  sel.options[best].selected=true;
  sel.options[best].selected=selected;
 }

 // set the selection back 
 if (sel.selectedIndex!=selectedIndex)
  sel.selectedIndex=selectedIndex;

 // now this should have been enough, 
 // but it doesn't work in IE6 and it's bugged in IE7
 sel.scrollTop=y;
}


Warning! This will not work if the select is hidden by way of display=none or visibility=hidden. Also, for large selects, it will look funny scrolling through all the options. Optimizations can be applied, that try to find the correct selectedIndex or stop after the scroll position has been found (like in this example) or that search the best scrollTop match by dividing the options in two parts rather than taking them one by one, etc.

Comments

Siderite

Not that I don&#39;t like spam URLs or anything, but *your blog entry doesn&#39;t have anything to do with select elements*.

Siderite

Anonymous

http://weblogs.asp.net/andrewfrederick/archive/2008/03/04/maintain-scroll-position-after-asynchronous-postback.aspx

Anonymous

Siderite

Well, I am glad I could help. Keeping the select multiple and simulating the single behavior is a pretty nice idea. I am a bit envious I didn&#39;t think of it myself.

Siderite

Indoom

Hello. I know this is kinda old post, but I search the internet for scrolling the select list and couldn&#39;t find anything useful. But your idea actually gave me some ideas. So I managed to make select to scroll cross browser. Tested on IE6,7, FF2, Safari win, Opera 2.25 I made select box multiple as default, and simulated single selection. I used that selecting and deselecting an option for scrolling and, for some browsers, .scrollTop too. There also even can be selected option. It wont lose its selection on scrolling. http://indoom.cgimage.lv/jstests/testselect.htm There is working test, with search input to test the scrolling.

Indoom

Anonymous

How about this: - make the select multiple; - scroll it; - add an onclick event to make sure that the select will act as a non multiple select; - finally restore the non multiple state: it will scroll to the new position depending on the option clicked, but this time it is ok. But is it really worth? Explore 6 is soon becoming obsolete any way.

Anonymous

Siderite

I don&#39;t think it works, period. Not with changing selected items. Maybe some other javascript magic?

Siderite

Anonymous

&gt;&gt;Let me try this... ... Too bad. It will also scroll the select to its original position :-(

Anonymous

Anonymous

&gt;&gt;If you set the select to multiple selection you will see that it works. For multiple select, yes, it works, because when you select the &quot;best&quot; option, you don&#39;t loose the original selection, and you don&#39;t have to care about the selectedIndex. But for non multiple select, you can&#39;t select an option to force scrolling and at the end restore the original select the same way but with no scrolling effetct. &gt;&gt;I will have to tweak this a little bit to make it work. How about changing the select to multiple, and restore it at the end? Let me try this...

Anonymous

Siderite

Yes, you are right! Now I understand what you mean. If you set the select to multiple selection you will see that it works. I will have to tweak this a little bit to make it work, but I don&#39;t have the time. Thanks for your comment!

Siderite

Anonymous

&gt;&gt;If I understand your question correctly, you ask how come the select will not scroll to the before last selected item when you unselect the last selected? More precisely &quot;when you set the selection back &quot; I tried your code. It works when the original selection is also visible in the new scrolled viewport after the function is applied. But, if the original selection lies outside, when you restore it, the window is scrolled again so that the original selected option is in view again. Try this code below: After you click on the buton, the select scrols, but will always comes back at its original state. &lt;SELECT ID=&quot;MySelect&quot; SIZE=&quot;10&quot;&gt; &lt;option&gt;Option 0 &lt;option&gt;Option 1 &lt;option&gt;Option 2 &lt;option&gt;Option 3 &lt;option&gt;Option 4 &lt;option&gt;Option 5 &lt;option&gt;Option 6 &lt;option&gt;Option 7 &lt;option&gt;Option 8 &lt;option&gt;Option 9 &lt;option&gt;Option 10 &lt;option&gt;Option 11 &lt;option&gt;Option 12 &lt;option&gt;Option 13 &lt;option&gt;Option 14 &lt;option&gt;Option 15 &lt;option&gt;Option 16 &lt;option&gt;Option 17 &lt;option&gt;Option 18 &lt;option selected&gt;Option 19 &lt;/select&gt; &lt;INPUT TYPE=&quot;button&quot; VALUE=&quot;scroll&quot; onclick=&quot;scrollSel()&quot;&gt; &lt;script&gt; function scrollSel() { setSelectVerticalScroll(document.getElementById(&#39;MySelect&#39;),100) } function setSelectVerticalScroll(sel,y) { ...

Anonymous

Siderite

If I understand your question correctly, you ask how come the select will not scroll to the before last selected item when you unselect the last selected? Then the answer is that the scroll to the selected item happends only at selection, not unselection. The code above will go through all items unselecting and selecting them (thus forcing scroll), then setting their original value, checking where is the vertical scroll and remembering the closest match to the desired vertical location. At the end, it just unselects,selects and sets the original value to the best match.

Siderite

Anonymous

Hi, I understand that setting the selected option will force the select to scroll to the desired position, but for the same reason, how come setting the selected index back to its original value does not scroll the select back so that the original selected option is in view again?

Anonymous

Post a comment