Какие свойства нужно найти чтобы определить место где происходит scroll?
Продвинутые темы
Чтобы определить, где происходит прокрутка, ищут элемент с прокруткой по свойствам `scrollHeight > clientHeight` и `overflow: auto/scroll`, а событие scroll — на нём или через `event.target`.
Как найти прокручиваемый элемент
Свойства прокрутки
- scrollHeight — полная высота содержимого (включая невидимое).
- clientHeight — видимая высота элемента.
- Элемент прокручивается, если
scrollHeight > clientHeight:
const isScrollable = el.scrollHeight > el.clientHeight;- scrollTop / scrollLeft — текущая позиция прокрутки.
Свойство overflow
Прокрутка возможна при overflow: auto или scroll:
const style = getComputedStyle(el);
const canScrollY = ['auto', 'scroll'].includes(style.overflowY);Найти прокручиваемого родителя
function getScrollParent(el) {
while (el) {
const style = getComputedStyle(el);
if (/(auto|scroll)/.test(style.overflowY) && el.scrollHeight > el.clientHeight) {
return el;
}
el = el.parentElement;
}
return document.scrollingElement; // fallback — прокрутка страницы
}Событие scroll
- На элементе:
el.addEventListener('scroll', handler). event.target— где произошла прокрутка.scrollне всплывает (у элемента) — слушают на конкретном прокручиваемом элементе или наdocument/windowдля страницы.
Коротко для собеседования
Прокручиваемый элемент определяют по scrollHeight > clientHeight и overflow: auto/scroll (через getComputedStyle). Позиция — scrollTop/scrollLeft. Прокручиваемого родителя ищут вверх по дереву. Событие scroll слушают на самом элементе (event.target — источник); оно не всплывает у элемента, для страницы — на window/document.