У меня есть элемент SELECT на веб-странице, и я бы хотел, чтобы он загружался прокруткой вниз. В большинстве браузеров, я могу это сделать:Javascript: Программно прокручивать не всплывающий элемент SELECT снизу в Chrome
myselect.scrollTop = myselect.scrollHeight;
Хотя scrollHeight находится вне границ, браузеры понять это и ограничить его соответствующим образом. За исключением Google Chrome. Я могу подать отчет об ошибке, но это не помогает мне с моей непосредственной проблемой. Поэтому я пробовал это:
myselect.scrollTop = myselect.scrollHeight - myselect.clientHeight;
Но это вычиталось слишком много - были предметы под днищем элемента. Я также попытался вычесть offsetHeight, но это было немного хуже.
Кто-нибудь знает какой-либо браузер-агностик, чтобы правильно рассчитать scrollTop, который должным образом связан, чтобы он работал с Chrome?
BTW, я нашел этот вопрос на stackoverflow: Cross-Browser method for setting ScrollTop of an element?. Возможно, это работает для DIV, но не для элементов SELECT и/или нет в Chrome.
Спасибо!
UPDATE: Вот HTML-страница, которая демонстрирует проблему:
<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>
Если я рассматриваю это в Chrome, последний вариант «LaStone» в основном отрезать дно. НО, если я удалю атрибут class="fields9", проблема исчезнет.
Можете ли вы настроить jsfiddle, чтобы показать проблему, потому что scrollHeight работает в хроме, я использую его все время. – Ryan
Надеюсь, код, который я вставлял в мое редактирование, - это то, что вы искали. –