PassFront
  1. PassFront
  2. База знаний
  3. Продвинутые темы

Какие свойства нужно найти чтобы определить место где происходит 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.

Другие вопросы раздела