Поймать конец скролла на JQuery

283
07 февраля 2020, 09:20

Если запустить ниже код, будет видно что производится автоматический скролл в конец объекта. Когда пользователь скроллит вверх до объекта НАЧАЛО, как поймать что он достиг начала и выполнить к примеру alert('Вы достигли начала объекта')

    function scrollToBottom(el) { 
        el.scrollTop = el.scrollHeight; 
    } 
    scrollToBottom(document.getElementById('result_discussion'));
div { 
overflow-y:scroll; 
height:150px; 
}
<div id="result_discussion"> 
<li>НАЧАЛО</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>AAA</li> 
<li>КОНЕЦ</li> 
</div>

Answer 1

Вот так можно определить, за счет теста пересечения прямоугольников контейнера и элемента

let container = document.getElementById('result_discussion'); 
let containerRect = container.getBoundingClientRect(); 
let trackElements = [...document.querySelectorAll('.track')]; 
let last; 
scrollToBottom(container); 
 
container.onscroll = function() { 
  trackElements.forEach(el => { 
    let r = el.getBoundingClientRect(); 
    if (intersectRect(r, containerRect) && last !== el) { 
      last = el; 
      console.log(el.textContent) 
    } 
  }); 
} 
 
function scrollToBottom(el) { 
    el.scrollTop = el.scrollHeight; 
} 
 
function intersectRect(r1, r2) { 
  return !(r2.left > r1.right ||  
           r2.right < r1.left ||  
           r2.top > r1.bottom || 
           r2.bottom < r1.top); 
}
<div id="result_discussion" style="overflow-y: scroll; height: 150px;"> 
<li class="track">НАЧАЛО</li> 
<li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li> 
<li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li> 
<li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li> 
<li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li> 
<li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li> 
<li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li> 
<li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li> 
<li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li> 
<li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li> 
<li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li> 
<li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li> 
<li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li> 
<li class="track">СЕРЕДИНА</li> 
<li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li> 
<li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li> 
<li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li> 
<li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li> 
<li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li> 
<li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li> 
<li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li> 
<li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li> 
<li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li> 
<li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li> 
<li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li> 
<li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li><li>AAA</li> 
<li class="track">КОНЕЦ</li> 
</div>

Answer 2

function scrollToBottom(el) { 
   el.scrollTop = el.scrollHeight; 
} 
scrollToBottom(document.getElementById('result_discussion')); 
     
     
$('#result_discussion').scroll(function(){ 
var s = $("#result_discussion").scrollTop(); 
 if (s == 0) { 
 console.log('Вы достигли начала объекта'); 
 } 
});
div { 
  overflow-y:scroll; 
  height:150px; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div id="result_discussion"> 
  <li>НАЧАЛО</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>AAA</li> 
  <li>КОНЕЦ</li> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте site-vizitka-kiev.org.ua
ТОП-10
READ ALSO
Прикрепить элемент к стенке браузера
HTML

Прикрепить элемент к стенке браузера

Необходимо прикрепить элемент к стенке браузера, чтобы тот взаимодействовал(шапка спускалась) вместе с прокруткой страницы внизНО, при этом...

 240
Не распознает шрифт в Safaris
HTML

Не распознает шрифт в Safaris

Проблема в том, что проверяя свою верстку на iPhone, шрифты различаются с Android и WindowsКак это исправить?

 216
Как на html страницы сделать &ldquo;карту&rdquo; и мини-карту
HTML

Как на html страницы сделать “карту” и мини-карту

Вообщем есть html страницаУ нее задний фон это некое изображение

 217
Динамические списки jQuery
HTML

Динамические списки jQuery

Всем привет!

 232