Ответ 1
Я думаю, что это действительно какая-то ошибка, связанная с шириной элемента select vs scrollHeight элемента.
Чем больше вариантов у вас есть, тем шире он может быть и до сих пор отлично работает. Если у меня есть тэг select с 39 опциями, то max, кажется, составляет около 510 пикселей, прежде чем он испортится.
В среднем максимальная ширина, которую может обрабатывать элемент выбора, составляет приблизительно 13 пикселей на выбор. Так что, если у вас есть селектор с 13 параметрами, то max составляет около 169px (13 * 13)
Когда вы переходите ко второму параметру, scrollTop имеет 14px и третий вариант, 28px. Таким образом, каждый элемент, который вы прокручиваете, составляет 14 пикселей. Таким образом, пока ширина меньше, чем scrollHeight минус определенное количество пикселей, она работает... Если вы используете 13 пикселей на один вариант, это, кажется, работает нормально.
Итак, у вас есть 2 варианта.
- Убедитесь, что ширина вашего выбора меньше 13 * количество опций
ИЛИ
- Используйте javascript, чтобы получить желаемое поведение... Я придумал JsFiddle, который работает. И для тех, кто любит использовать jQuery, попробуйте этот JsFiddle
Вам просто нужно прослушать событие keydown и отрегулировать прокрутку, чтобы выбранный элемент находился в поле зрения до его выбора.
Кроме того, чтобы заставить scrollByLines (numberOfLines) метод работать с элементом прокрутки, он должен иметь следующий стиль:
overflow-y: scroll;
Вот быстрый HTML-документ, который работает
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// This happens on document load
function myOnLoad() {
// Get the selector element
var mySelector = document.getElementById('mySelector');
// If the selector is doomed to glitch out on us because it wider than the max allowed width, we need to fix it
if (mySelector.offsetWidth > 13 * mySelector.options.length) {
// Figure out the pixels for a single scroll line
mySelector.scrollByLines(1);
var scrollLineHeight = mySelector.scrollTop;
// Scroll back to the top
mySelector.scrollTop = 0;
// Add a keydown event listener so that we can scroll programatically before it messes up
mySelector.addEventListener('keydown', function (e) {
// Only listen to up and down arrows
if (e.keyCode !== 38 && e.keyCode !== 40) {
return;
}
// Figure out where the selector is scrolled to
var scrollTop = this.scrollTop;
var scrolledToLine = parseInt(scrollTop / scrollLineHeight);
// If we hit the up arrow and the selected index is equal to the scrolled line, simply move us up by one
if (e.keyCode === 38 && this.selectedIndex === scrolledToLine) {
this.scrollByLines(-1);
}
// If we hit the down arrow and the selected index is equal to the scrolled line + the number of visible lines - 1, move us down by one
if (e.keyCode === 40 && this.selectedIndex === scrolledToLine + (this.size - 1)) {
this.scrollByLines(1);
}
});
}
}
</script>
</head>
<body onload="myOnLoad();">
<select size="5" name="selectMultiple" multiple="multiple" style="width:100%; overflow-y: scroll;" id="mySelector">
<option value="0">line 0</option>
<option value="1">line 1</option>
<option value="2">line 2</option>
<option value="3">line 3</option>
<option value="4">line 4</option>
<option value="5">line 5</option>
<option value="6">line 6</option>
<option value="7">line 7</option>
<option value="8">line 8</option>
<option value="9">line 9</option>
<option value="10">line 10</option>
<option value="11">line 11</option>
<option value="12">line 12</option>
</select>
</body>
</html>
И вот версия jQuery:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
// Get the selector element
var mySelectorObj = $('#mySelector');
var mySelector = mySelectorObj[0];
// If the selector is doomed to glitch out on us because it wider than the max allowed width, we need to fix it
if (mySelector.offsetWidth > 13 * mySelector.options.length) {
// Figure out the pixels for a single scroll line
mySelector.scrollByLines(1);
var scrollLineHeight = mySelector.scrollTop;
// Scroll back to the top
mySelector.scrollTop = 0;
// Add a keydown event listener so that we can scroll programatically before it messes up
mySelectorObj.on('keydown', function(e) {
// Only listen to up and down arrows
if (e.keyCode !== 38 && e.keyCode !== 40) {
return;
}
// Figure out where the selector is scrolled to
var scrollTop = this.scrollTop;
var scrolledToLine = parseInt(scrollTop / scrollLineHeight);
// If we hit the up arrow and the selected index is equal to the scrolled line, simply move us up by one
if (e.keyCode === 38 && this.selectedIndex === scrolledToLine) {
this.scrollByLines(-1);
}
// If we hit the down arrow and the selected index is equal to the scrolled line + the number of visible lines - 1, move us down by one
if (e.keyCode === 40 && this.selectedIndex === scrolledToLine + (this.size - 1)) {
this.scrollByLines(1);
}
});
}
});
</script>
</head>
<body>
<select size="5" name="selectMultiple" multiple="multiple" style="width:100%; overflow-y: scroll;" id="mySelector">
<option value="0">line 0</option>
<option value="1">line 1</option>
<option value="2">line 2</option>
<option value="3">line 3</option>
<option value="4">line 4</option>
<option value="5">line 5</option>
<option value="6">line 6</option>
<option value="7">line 7</option>
<option value="8">line 8</option>
<option value="9">line 9</option>
<option value="10">line 10</option>
<option value="11">line 11</option>
<option value="12">line 12</option>
</select>
</body>
</html>