Форум

torrius · #1 (**permalink**) 22.01.2017, 19:46

Всех приветствую!

Задача: нужно вызвать событие при прокрутке скролла элемента до конца.

Почти везде встречал одно и то же решение, которое работает не совсем адекватно (по крайней мере в хроме), это:

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>

рони · #2 (**permalink**) 22.01.2017, 20:55

torrius,
чем код не устраивает?

torrius · #3 (**permalink**) 22.01.2017, 21:47

в ие и файрфоксе - все устраивает. В опере и хроме работает не стабильно, т.к. element.scrollTop в конце прокрутки возвращает дробное и непостоянное число.

рони · #4 (**permalink**) 22.01.2017, 21:59

torrius,
Math.round

torrius · #5 (**permalink**) 22.01.2017, 22:22

пробовал, там может получится, допустим, так:
element.scrollHeight - element.clientHeight = 100, а
element.scrollTop = 99.2 или 99,8 или 100.4 и т.д.
поэтому условие срабатывает не всегда. Но это пол-беды.
Из-за округления, событие может вызваться и несколько раз подряд, потому что оно наступает и при 99.6 и 99.8 и 100...

как это победить? )

рони · #6 (**permalink**) 22.01.2017, 22:58

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>

torrius · #7 (**permalink**) 22.01.2017, 23:24

рони, как всегда - спаситель! )) Спасибо человеческое!
Да уж, оригинальный бубен! и ведь работает!

Я уж было стал через 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;
	}

Форум

Справочник

Discord чат

Курсы javascript