Как отследить конец прокрутки элемента?
Всех приветствую!
Задача: нужно вызвать событие при прокрутке скролла элемента до конца. Почти везде встречал одно и то же решение, которое работает не совсем адекватно (по крайней мере в хроме), это: if(element.scrollHeight - element.scrollTop === element.clientHeight) alert('Конец прокрутки') Проблема в том, что element.scrollHeight - это целое число, а element.scrollTop - дробное, причем при ресайзе окна и прокрутке до конца вниз, element.scrollTop может быть как больше, так и меньше реального размера. То есть: ( element.scrollHeight - element.scrollTop - element.clientHeight ) = больше или меньше нуля. Кто знает, как быть?
<html>
<head></head>
<body>
<p id="out">0.0</p>
<div id="scroll" style="height: 50%; width: 200px; overflow: auto; font-size: 30px;">
0<br>0<br>0<br>0<br>0<br>0<br>0<br>0<br>
0<br>0<br>0<br>0<br>0<br>0<br>0<br>0<br>
0<br>0<br>0<br>0<br>0<br>0<br>0<br>0<br>
0<br>0<br>0<br>0<br>0<br>0<br>0<br>0<br>
</div>
<script>
var out = document.getElementById('out');
var element = document.getElementById('scroll');
element.onscroll = function() {
var scroll = element.scrollTop;
var height = element.scrollHeight - element.clientHeight;
out.innerHTML = scroll + ' : ' + height;
if( height - scroll === 0 ) alert('ok!')
}
</script>
</body>
</html>
|
torrius,
чем код не устраивает? |
в ие и файрфоксе - все устраивает. В опере и хроме работает не стабильно, т.к. element.scrollTop в конце прокрутки возвращает дробное и непостоянное число.
|
torrius,
Math.round |
пробовал, там может получится, допустим, так:
element.scrollHeight - element.clientHeight = 100, а element.scrollTop = 99.2 или 99,8 или 100.4 и т.д. поэтому условие срабатывает не всегда. Но это пол-беды. Из-за округления, событие может вызваться и несколько раз подряд, потому что оно наступает и при 99.6 и 99.8 и 100... как это победить? ) |
максимальный scroll элемента
torrius,
вот такие танцы с бубном ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#scroll{
background-color: #8B008B;
}
body, html{
height: 100%;
}
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p id="out">0.0</p>
<div id="scroll" style="height: 50%; width: 200px; overflow: auto; font-size: 30px;">
0<br>0<br>0<br>0<br>0<br>0<br>0<br>0<br>
0<br>0<br>0<br>0<br>0<br>0<br>0<br>0<br>
0<br>0<br>0<br>0<br>0<br>0<br>0<br>0<br>
0<br>0<br>0<br>0<br>0<br>0<br>0<br>0<br>
</div>
<script>
var out = document.getElementById('out');
var element = document.getElementById('scroll');
var temp = element.scrollTop
element.scrollTop = 1 + element.scrollHeight - element.clientHeight;
var height = element.scrollTop;
element.scrollTop = temp;
element.onscroll = function() {
var scroll = element.scrollTop ;
out.innerHTML = scroll + ' : ' + height ;
if( height - scroll === 0 ) out.innerHTML += "end"
}
</script>
</body>
</html>
|
рони, как всегда - спаситель! )) Спасибо человеческое!
Да уж, оригинальный бубен! и ведь работает! :) Я уж было стал через onmousewheel мудрить. Немножко только доработал, чтоб при ресайзе продолжало работать:
var
out = document.getElementById('out'),
element = document.getElementById('scroll'),
temp, height;
init();
window.onresize = init;
element.onscroll = function() {
var scroll = element.scrollTop ;
out.innerHTML = scroll + ' : ' + height ;
if( height - scroll === 0 ) alert('ok')
}
function init() {
temp = element.scrollTop;
element.scrollTop = 1 + element.scrollHeight - element.clientHeight;
height = element.scrollTop;
element.scrollTop = temp;
}
|
| Часовой пояс GMT +3, время: 19:54. |