Ich habe eine SELECT Element in einer Webseite, und ich möchte, dass es nach unten gescrollt geladen wird. In den meisten Browsern kann ich das tun:
myselect.scrollTop = myselect.scrollHeight;Obwohl scrollHeight ist, finden die Browser das heraus und schränken es entsprechend ein. Außer in Google Chrome. Ich könnte einen Fehlerbericht einreichen, aber das hilft mir bei meinem unmittelbaren Problem nicht weiter. Also habe ich dies versucht:
myselect.scrollTop = myselect.scrollHeight - myselect.clientHeight;Aber das hat zu viel abgezogen - es gab Elemente unterhalb der Unterseite des Elements. Ich habe auch versucht zu subtrahieren offsetHeight aber das war noch etwas schlimmer.
Kennt jemand eine browserunabhängige Methode zur korrekten Berechnung der scrollTop die ordnungsgemäß in-bounds ist, so dass es mit Chrome funktionieren wird?
Übrigens, ich habe diese Frage auf Stackoverflow gefunden: Cross-Browser-Methode für die Einstellung ScrollTop eines Elements? . Vielleicht funktioniert das für DIVs, aber nicht für SELECT-Elemente und/oder nicht in Chrome.
Danke!
UPDATE: Hier ist eine HTML-Seite, die das Problem veranschaulicht:
<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>Wenn ich dies in Chrome ansehe, ist die letzte Option "lastone" größtenteils von unten abgeschnitten. ABER, wenn ich die class="fields9" wird das Problem beseitigt.
