Listen for the scroll event to trigger an action when the user scrolls to a certain point in the page.

Use Case: Lazy Load Content on Scroll

Load additional content as the user scrolls down the page to improve performance and user experience.

Example:

<div style="height: 1500px; padding: 20px;">
  <p>Scroll down to load more content...</p>
</div>
<div id="additionalContent" style="display: none; background-color: lightblue; padding: 20px;">
  <p>Additional Content Loaded!</p>
</div>

<script>
  window.addEventListener('scroll', function() {
    if (window.scrollY + window.innerHeight >= document.body.scrollHeight) {
      document.getElementById('additionalContent').style.display = 'block';
    }
  });
</script>