JavaScript

Программная прокрутка div - последний штрих

Добрый день !
Была задача - найти div по ID и программно прокрутить его на определенное количество позиций . С ее решением мне помогли. Вот код:

const navBar = document.getElementById("sidebar-quicklinks");
navBar.scrollBy({behavior: "smooth", top: 3000});

часть задачи решена. Поехали дальше...
В интернте (источник https://javascript.ru/forum/events/67004-kak-otsledit-konec-prokrutki-ehlementa.html ) я нашла код, который определяет, что элемент прокручен до конца. Код какой-то крутой, так как решает проблему с дробными числами и ресайзом окна.

<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>

Это код про прокрутке вверху страницы выводит координаты и, если достигли конца прокрутки добавляет к координатаv слово "end"

Задача: написать скрипт, который выполняет следующее:
1. Находим элемент div по ID
2. Програмно прокручиваем его на определенное количество позиций
3. Ждем 1 секунду, так как страница динамическая и подгружается по мере прокрутки
4. Проверяем , достигли ли мы конца прокрутки.
5. Если не достигли, снова програмно прокручиваем , если достигли конца прокрутки - прерываем работу всего скрипта

вывод координат мне не нужен и код должен работать без сторонних библиотек типа JQuery.

Заранее благодарю за помощь
Проверять через секунду - не очень надежная штука, не у всех будет сразу всё подгружаться, может инет тупить или еще чего. Обычно такое привязывают к самой функции загрузки, чтобы сама загрузила, убедилась что загружено - и проскроллила. Но раз уж нет к той функции доступа...
 (function() {
const SCROLL_BY = 3000;

/***/
let sidebar = document.getElementById('sidebar-quicklinks');
scroll_sidebar();

function scroll_sidebar() {
sidebar.scrollBy(({ behavior: "smooth", top: SCROLL_BY }));
}

/*** Сколько раз уже проверяли через секунду,
* и не обнаружили место для скролла */
let no_scroll_detected_times = 0;

let interval = setInterval(function() {
scroll_sidebar();

let no_scroll = (
sidebar.scrollTop + sidebar.clientHeight == sidebar.scrollHeight
);

if (no_scroll) {
if (++no_scroll_detected_times == 3) clearInterval(interval);
/* ++x увличивает переменную на 1, затем сравниваем с 3 */
/* Если за 3 секунды ничего не скроллилось */

} else {

/* За 3 секнды че-то скроллилось */
no_scroll_detected_times = 0;
}
}, 1000);

/* как только навели мышку на сайдбар, пусть
* авто-скролл прекращается и не бесит, убегая из под рук.*/
sidebar.addEventListener('pointerenter', function() {
clearInterval(interval);
});

})();
[ https://jsbin.com/duyeyulexe/edit?html,js,output - демо (кликать Run with JS) ]
LG
Lui Garox
62 360
Лучший ответ
Не обязательно использовать строгое сравнение. достаточно ==. Строгое для того, чтобы узнать, что, например True === True, истина равна истине, а не единице. Ну плюс let, а не var.
Ilhom Turgunov
Ilhom Turgunov
2 989
Александр Серов Я еще ничего не сравниваю - это пример чужого кода.
Мне нипонятно
К!
Колян !!
803