How to perform an action when scrolling to a certain…

You can use a combination of addEventListener to track the scroll event on an element (window or a specific container) and the getBoundingClientRect() method to determine the position of the target element relative to the viewport.

Getting a reference to the element:

// Get the element to scroll to
const targetElement = document.getElementById('my-target-element');

Adding a scroll event listener:

// Add a scroll event listener to the window
window.addEventListener('scroll', handleScroll);

Creating the scroll handler function:

function handleScroll() {
  // Get the position of the element relative to the viewport
  const rect = targetElement.getBoundingClientRect();

  // Check if the top of the element is within the viewport
  // You can also check the bottom or the center
  const isVisible = rect.top <= window.innerHeight && rect.bottom >= 0;

  if (isVisible) {
    // Perform the desired action, e.g., display the element or start an animation
    console.log('Element is now visible!');

    // Optionally, remove the event listener to only trigger once
    window.removeEventListener('scroll', handleScroll);
  }
}

For optimization, you can use "throttling" or "debouncing" for the scroll handler to prevent handleScroll from being called too frequently during scrolling, which can improve performance.

// Simple throttling implementation
function throttle(func, delay) {
  let timeoutId = null;
  return function(...args) {
    if (!timeoutId) {
      timeoutId = setTimeout(() => {
        func.apply(this, args);
        timeoutId = null;
      }, delay);
    }
  };
}

// Using throttling
const throttledHandleScroll = throttle(handleScroll, 100); // Call at most once every 100ms
window.addEventListener('scroll', throttledHandleScroll);

How to perform an action when scrolling to a certain point?