Белгілі бір орынға дейін скролл болған кезде әрекетті…

Осы үшін addEventListener байланысын пайдаланып, элементте (window немесе нақты контейнерде) scroll оқиғасын бақылауға және қажетті элементтің орналасқан жерін көру аймағына қатысты анықтау үшін getBoundingClientRect() әдісін қолдануға болады.

Элементке сілтеме алу:

// Скролл жасау керек элементті аламыз
const targetElement = document.getElementById('my-target-element');

scroll оқиғасын өңдеушіні қосу:

// Терезеге `scroll` оқиғасын өңдеушіні қосу
window.addEventListener('scroll', handleScroll);

Өңдеуші функцияны жасау:

function handleScroll() {
  // Элементтің орналасқан жерін көру аймағына қатысты алу
  const rect = targetElement.getBoundingClientRect();

  // Элементтің жоғарғы шекарасы көру аймағында ма екенін анықтау
  // Сондай-ақ, төменгі шекара немесе орталықты тексеруге болады
  const isVisible = rect.top <= window.innerHeight && rect.bottom >= 0;

  if (isVisible) {
    // Қажетті әрекетті орындау, мысалы, элементті көрсету немесе анимацияны іске қосу
    console.log('Элемент көрінетін болды!');

    // Қосымша: өңдеушіні жою, әрекет тек бір рет орындалуы үшін
    window.removeEventListener('scroll', handleScroll);
  }
}

Оптимизациялау үшін scroll өңдеушісіне "throttling" немесе "debouncing" қолдануға болады, бұл handleScroll функциясының скроллинг кезінде тым жиі шақырылуын болдырмайды және өнімділікті жақсартады.

// Қарапайым throttling іске асыру
function throttle(func, delay) {
  let timeoutId = null;
  return function(...args) {
    if (!timeoutId) {
      timeoutId = setTimeout(() => {
        func.apply(this, args);
        timeoutId = null;
      }, delay);
    }
  };
}

// Throttling қолдану
const throttledHandleScroll = throttle(handleScroll, 100); // 100мс-тан жиі емес шақыру
window.addEventListener('scroll', throttledHandleScroll);

Белгілі бір орынға дейін скролл болған кезде әрекетті қалай орындауға болады?