Search code examples
javascripthtmlselectscrolltop

Javascript: Programmatically scroll non-popup SELECT element to bottom in Chrome

I have a SELECT element in a web page, and I'd like it to load scrolled to the bottom. In most browsers, I can do this:

myselect.scrollTop = myselect.scrollHeight;

Although scrollHeight is out of bounds, the browsers figure that out and limit it appropriately. Except in Google Chrome. I could file a bug report, but that doesn't help me with my immediate problem. So I tried this:

myselect.scrollTop = myselect.scrollHeight - myselect.clientHeight;

But that subtracted too much -- there were items below the bottom of the element. I also tried subtracting offsetHeight, but that was slightly worse.

Does anyone know a browser-agnostic way to properly calculate the scrollTop that is properly in-bounds so it'll work with Chrome?

BTW, I found this question on stackoverflow: Cross-Browser method for setting ScrollTop of an element?. Perhaps that works for DIVs, but not for SELECT elements and/or not in Chrome.

Thanks!

UPDATE: Here's an HTML page that demonstrates the problem:

<html>
<head>

<style type="text/css">
.fields9{font-size:15px;height: 180px; width:420px; overflow: auto; border:1px solid #2d2b2d;}
</style>

</head>
<body>

<select multiple="multiple" size="10" id="myselect" class="fields9">
<option>firstone</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>lastone</option>
</select>

<script type="text/javascript">

element=document.getElementById("myselect");
//element.scrollTop = element.scrollHeight;
element.scrollTop = element.scrollHeight - element.clientHeight;

</script>

</body>
</html>

If I view this in Chrome, the last option "lastone" is mostly cut off the bottom. BUT, if I remove the class="fields9" attribute, the problem goes away.

Solution

  • Get rid of overflow: auto in fields9 declaration to make it work properly in Firefox and Chrome. Here's working example: http://jsfiddle.net/c4LDv/7/.

    Sadly, I wasn't able to find any solution for making it work in Opera - apparently you can't scroll select programatically in Opera...

    Edit: I've come up with a hackish approach, using selectedIndex to trigger scrolling to that last option. Check it out here: http://jsfiddle.net/c4LDv/16/ it work in Chrome, Firefox and Opera. However - it won't scroll down to last option in Opera if one or more option is already selected (on page load) - see it here http://jsfiddle.net/c4LDv/15/ - I wasn't able to override this behavior.