Всех приветствую!
Задача: нужно вызвать событие при прокрутке скролла элемента до конца.
Почти везде встречал одно и то же решение, которое работает не совсем адекватно (по крайней мере в хроме), это:
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>