Следующее было протестировано в Internet Explorer 8 в Windows XP, Internet Explorer 9 в Windows 7 и Chrome 17 в Windows 7. Он работает правильно в Chrome, но не в IE.
Вкратце, IE, кажется, запутался, когда свойство scrollTop HTML-объекта select (listbox). После установки IE помещает поле прокрутки в правильное место и отображает правильные значения для этого значения scrollTop. Однако, нажав на полосу прокрутки после установки scrollTop, экран переместится в другое место списка.
Кто-нибудь знает, как заставить IE учитывать значение scrollTop, чтобы прокрутка конечного пользователя начиналась с этой позиции scrollTop?
Я не занимаюсь программированием на JavaScript, поэтому, пожалуйста, будьте осторожны. :)
Если вы запустите это, введите значение от 0 до максимального значения scrollTop, нажмите кнопку «Перейти к scrollTop», а затем нажмите стрелку вверх или вниз на полосе прокрутки. Когда это сработает, вы будете двигаться вверх или вниз от того места, куда вас привела кнопка scrollTop. Если это не сработает, вы переместитесь полностью назад к вершине списка или на случайное расстояние от того места, где вы были, если вы уже прокручивали вручную до нажатия кнопки.
Вот код онлайн: http://jsfiddle.net/davidd/2yPVa/
Вот код в строке:
<html>
<form id="myForm">
<select name='ListBox' id='LB1' size=10></select><BR>
Set scrollTop Value: <input type="text" id="scrollTopValue" value="1000" onkeypress="return noenter()"/>
<br><br><br>
<button type="button" onclick="updateNumbers()">Update Numbers</button>
<button type="button" onclick="goToScrollTop()">Go To scrollTop</button>
<br><br><br>
<select name='ListBox' id='LB2' size=10" ></select><BR>
</form>
<script type="text/javascript">
window.onload = initialize();
function initialize() {
var i;
var select1 = document.getElementById( 'LB1' );
for(i = 0; i < 100; i++)
{
try
{
select1.add(new Option(i));
}
catch(ex)
{
select1.add(new Option(i),select1.options[null]); // for older IE versions
}
}
updateNumbers();
}
function goToScrollTop() {
var select1 = document.getElementById('LB1');
var input1 = document.getElementById('scrollTopValue');
if (input1.value < 0 || input1.value > (select1.scrollHeight - select1.clientHeight) || isNaN(input1.value))
{
alert("scrollTop value must be between 0 and " + (select1.scrollHeight - select1.clientHeight));
}
else
{
select1.scrollTop = input1.value;
}
}
function updateNumbers() {
var select1 = document.getElementById( 'LB1' );
var select2 = document.getElementById( 'LB2' );
select2.length = 0;
try
{
select2.options.add(new Option('scrollTop = ' + select1.scrollTop));
select2.options.add(new Option('scrollHeight = ' + select1.scrollHeight));
select2.options.add(new Option('clientHeight = ' + select1.clientHeight));
select2.options.add(new Option('scrollHeight - clientHeight = max scrollTop = ' + (select1.scrollHeight - select1.clientHeight)));
select2.options.add(new Option('listbox.length = ' + select1.length));
}
catch(ex)
{
alert(ex);
}
}
function noenter() {
return !(window.event && window.event.keyCode == 13); }
</script>
</html>
Спасибо