Javascript: программно прокручивать не всплывающий элемент SELECT в нижней части Chrome - PullRequest
Новая
       2

Javascript: программно прокручивать не всплывающий элемент SELECT в нижней части Chrome

2 голосов
/ 02 ноября 2011

У меня есть элемент SELECT на веб-странице, и я бы хотел, чтобы он загружался с прокруткой вниз.В большинстве браузеров я могу сделать это: 

myselect.scrollTop = myselect.scrollHeight;

Хотя scrollHeight выходит за границы, браузеры понимают это и ограничивают его соответствующим образом.За исключением в Google Chrome.Я мог бы подать отчет об ошибке, но это не помогло мне решить мою непосредственную проблему.Итак, я попробовал это: 

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

Но это слишком много вычитало - там были элементы ниже нижней части элемента.Я также попытался вычесть offsetHeight, но это было немного хуже.

Кто-нибудь знает независимый от браузера способ правильно рассчитать scrollTop, который правильно встроен, так что он будет работать с Chrome?

Кстати, я нашел этот вопрос на stackoverflow: Кросс-браузерный метод для установки ScrollTop элемента? .Возможно, это работает для DIV, но не для элементов SELECT и / или не в Chrome.

Спасибо!

ОБНОВЛЕНИЕ: Вот страница 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", проблема исчезнет.

1 Ответ

2 голосов
/ 08 ноября 2011

Избавьтесь от переполнения: авто в объявлении fields9, чтобы оно работало правильно в Firefox и Chrome. Вот рабочий пример: http://jsfiddle.net/c4LDv/7/.

К сожалению, я не смог найти никакого решения для того, чтобы заставить его работать в Opera - очевидно, вы не можете прокручивать выбор программно в Opera ...

Редактировать : я пришел к хакерскому подходу, используя selectedIndex, чтобы запустить прокрутку до последней опции. Проверьте это здесь: http://jsfiddle.net/c4LDv/16/ это работает в Chrome, Firefox и Opera. Однако - он не будет прокручиваться до последней опции в Opera, если одна или несколько опций уже выбраны (при загрузке страницы) - смотрите здесь http://jsfiddle.net/c4LDv/15/ - Я не смог переопределить это поведение.

...