Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.01.2017, 18:46
Интересующийся
Отправить личное сообщение для torrius Посмотреть профиль Найти все сообщения от torrius
 
Регистрация: 19.11.2014
Сообщений: 15

Как отследить конец прокрутки элемента?
Всех приветствую!

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

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

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, 22.01.2017 в 19:13.
Ответить с цитированием
  #2 (permalink)  
Старый 22.01.2017, 19:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,127

torrius,
чем код не устраивает?
Ответить с цитированием
  #3 (permalink)  
Старый 22.01.2017, 20:47
Интересующийся
Отправить личное сообщение для torrius Посмотреть профиль Найти все сообщения от torrius
 
Регистрация: 19.11.2014
Сообщений: 15

в ие и файрфоксе - все устраивает. В опере и хроме работает не стабильно, т.к. element.scrollTop в конце прокрутки возвращает дробное и непостоянное число.
Ответить с цитированием
  #4 (permalink)  
Старый 22.01.2017, 20:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,127

torrius,
Math.round
Ответить с цитированием
  #5 (permalink)  
Старый 22.01.2017, 21:22
Интересующийся
Отправить личное сообщение для torrius Посмотреть профиль Найти все сообщения от torrius
 
Регистрация: 19.11.2014
Сообщений: 15

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

как это победить? )
Ответить с цитированием
  #6 (permalink)  
Старый 22.01.2017, 21:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,127

максимальный 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>

Последний раз редактировалось рони, 13.03.2020 в 14:45.
Ответить с цитированием
  #7 (permalink)  
Старый 22.01.2017, 22:24
Интересующийся
Отправить личное сообщение для torrius Посмотреть профиль Найти все сообщения от torrius
 
Регистрация: 19.11.2014
Сообщений: 15

рони, как всегда - спаситель! )) Спасибо человеческое!
Да уж, оригинальный бубен! и ведь работает!
Я уж было стал через 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;
	}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как запомнить потомка, пототомов у родительского элемента? 1975andrei Общие вопросы Javascript 5 25.01.2013 14:57
link.onload - как отследить загрузку CSS-файла? khusamov Events/DOM/Window 12 27.06.2012 13:44
script.onload Как отследить ошибку загрузки файла? khusamov Events/DOM/Window 5 27.01.2012 22:01
Как узнать что полоса прокрутки коснулся самого низа Грабовский Элементы интерфейса 3 15.01.2012 12:33
Как найти конец плоского файла Don_001 Общие вопросы Javascript 1 07.07.2009 11:47