Где взять свойства чтобы определить место где происходит scroll?

Определение позиции скролла (Scroll Position)

Для определения места, где происходит скролл, используются различные свойства и методы в зависимости от контекста. Давайте разберемся, какие свойства использовать в разных ситуациях.

Скролл всей страницы (window scroll)

Основные свойства:

1. window.scrollX — горизонтальная позиция скролла (в пикселях от левого края)
2. window.scrollY — вертикальная позиция скролла (в пикселях от верхнего края)
3. window.pageXOffset — алиас для scrollX (поддержка старых браузеров)
4. window.pageYOffset — алиас для scrollY (поддержка старых браузеров)

// Получить текущую позицию скролла страницы
const scrollX = window.scrollX; // или window.pageXOffset
const scrollY = window.scrollY; // или window.pageYOffset

console.log(`Скролл: X=${scrollX}, Y=${scrollY}`);

// Обработка события скролла
window.addEventListener('scroll', () => {
  console.log(`Текущая позиция скролла: ${window.scrollY}px`);
  
  // Пример: показать кнопку "Вернуться в начало" когда скролл > 300px
  const scrollToTopBtn = document.getElementById('scroll-to-top');
  if (window.scrollY > 300) {
    scrollToTopBtn.style.display = 'block';
  } else {
    scrollToTopBtn.style.display = 'none';
  }
});

Скролл конкретного элемента (element scroll)

Свойства элемента:

1. element.scrollLeft — горизонтальная позиция скролла элемента
2. element.scrollTop — вертикальная позиция скролла элемента
3. element.scrollWidth — полная ширина содержимого (включая скрытое)
4. element.scrollHeight — полная высота содержимого (включая скрытое)

// Получить скролл конкретного элемента
const scrollContainer = document.getElementById('scroll-container');
const scrollLeft = scrollContainer.scrollLeft;
const scrollTop = scrollContainer.scrollTop;

console.log(`Позиция скролла контейнера: left=${scrollLeft}, top=${scrollTop}`);

// Обработка скролла элемента
scrollContainer.addEventListener('scroll', () => {
  console.log(`Скролл элемента: ${scrollContainer.scrollLeft}, ${scrollContainer.scrollTop}`);
});

Пример: Отслеживание скролла для sticky header

window.addEventListener('scroll', () => {
  const header = document.querySelector('header');
  
  if (window.scrollY > 0) {
    header.classList.add('sticky');
  } else {
    header.classList.remove('sticky');
  }
});

Размеры вьюпорта и элементов

Для полного понимания позиции скролла нужны свойства размеров:

// Размеры окна браузера (viewport)
const windowHeight = window.innerHeight;
const windowWidth = window.innerWidth;

// Размеры всей страницы
const documentHeight = document.documentElement.scrollHeight;
const documentWidth = document.documentElement.scrollWidth;

// Размеры элемента
const element = document.getElementById('my-element');
const elementHeight = element.scrollHeight;  // Высота содержимого
const elementWidth = element.scrollWidth;    // Ширина содержимого
const clientHeight = element.clientHeight;   // Видимая высота
const clientWidth = element.clientWidth;     // Видимая ширина

Практический пример: Бесконечный скролл (Infinite Scroll)

function setupInfiniteScroll() {
  window.addEventListener('scroll', () => {
    const scrollHeight = document.documentElement.scrollHeight;
    const scrollTop = document.documentElement.scrollTop;
    const clientHeight = window.innerHeight;
    
    // Если пользователь прокрутил близко к концу страницы (100px)
    if (scrollTop + clientHeight >= scrollHeight - 100) {
      console.log('Нужно загрузить ещё содержимое!');
      loadMoreContent();
    }
  });
}

async function loadMoreContent() {
  const response = await fetch('/api/more-items');
  const data = await response.json();
  appendItemsToPage(data);
}

Определение видимости элемента в viewport

// Старый способ - вычисление позиций
function isElementInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= window.innerHeight &&
    rect.right <= window.innerWidth
  );
}

// Новый способ - Intersection Observer (рекомендуется)
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Элемент видна на экране!');
      entry.target.classList.add('visible');
    } else {
      console.log('Элемент вышла из экрана');
      entry.target.classList.remove('visible');
    }
  });
});

document.querySelectorAll('.lazy-element').forEach(el => {
  observer.observe(el);
});

Программное управление скроллом

// Прокрутить на определённое количество пикселей
window.scrollBy(0, 100);  // Вниз на 100px
window.scrollBy(-50, 0);  // Влево на 50px

// Прокрутить на конкретную позицию
window.scrollTo(0, 0);    // В начало страницы
window.scrollTo(0, 1000); // На позицию 1000px

// Плавная прокрутка (smooth scroll)
window.scrollTo({
  top: 1000,
  left: 0,
  behavior: 'smooth'  // 'smooth' или 'auto'
});

// Прокрутить элемент в видимую область
element.scrollIntoView();        // Резко
element.scrollIntoView({ behavior: 'smooth' }); // Плавно

// Прокрутить контейнер
const container = document.getElementById('scroll-container');
container.scrollTop = 500;
container.scrollLeft = 300;

Полный пример: Отслеживание прогресса скролла

function setupScrollProgress() {
  const progressBar = document.getElementById('scroll-progress');
  
  window.addEventListener('scroll', () => {
    const scrollTop = document.documentElement.scrollTop;
    const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
    const scrollPercent = (scrollTop / scrollHeight) * 100;
    
    progressBar.style.width = scrollPercent + '%';
  });
}

// HTML для полоски прогресса
// <div id="scroll-progress" style="height: 4px; background: blue; width: 0%; position: fixed; top: 0; left: 0; z-index: 1000;"></div>

Таблица свойств скролла

Производительность: throttle скролла

Эвент scroll срабатывает очень часто (десятки раз в секунду). Обычно нужна оптимизация:

function throttle(func, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

const handleScroll = throttle(() => {
  console.log('Скролл:', window.scrollY);
}, 100); // Срабатывает максимум раз в 100ms

window.addEventListener('scroll', handleScroll);

Для определения позиции скролла используй window.scrollY / scrollX для страницы и element.scrollTop / scrollLeft для конкретных элементов. Для отслеживания видимости элементов предпочитай Intersection Observer API — это более эффективно и современно.