滚动上下时为viewport Div添加不同class的技术问题求助

Hey there! Let's work through this together. You've already got a solid foundation for adding/removing classes when elements enter or leave the viewport—now we just need to tweak it to apply distinct classes based on scroll direction (up vs down). Here's a step-by-step breakdown with working code examples:

1. First, Track Scroll Direction #

We need a simple way to detect whether the user is scrolling up or down. We'll store the last scroll position and compare it to the current position on each scroll event (with throttling to keep things performant):

let lastScrollTop = 0;
let scrollDirection = 'down'; // Default to down on initial page load

// Throttle function to reduce excessive scroll event calls
function throttle(func, delay) {
  let timeoutId;
  return function() {
    const context = this;
    const args = arguments;
    if (!timeoutId) {
      timeoutId = setTimeout(() => {
        func.apply(context, args);
        timeoutId = null;
      }, delay);
    }
  };
}

// Update scroll direction on scroll
window.addEventListener('scroll', throttle(() => {
  const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
  scrollDirection = currentScrollTop > lastScrollTop ? 'down' : 'up';
  lastScrollTop = currentScrollTop;
}, 100)); // Adjust delay for responsiveness vs performance

2. Integrate with Viewport Detection (Using Intersection Observer) #

Since you already have viewport detection working, we'll combine it with the scroll direction check. The Intersection Observer API is the modern, efficient way to handle this:

// Configure the Intersection Observer
const observerConfig = {
  root: null, // Use the browser viewport as the root
  rootMargin: '0px',
  threshold: 0.1 // Trigger when 10% of the element is visible (adjust as needed)
};

const viewportObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    const target = entry.target;
    
    if (entry.isIntersecting) {
      // Add the appropriate class based on scroll direction
      if (scrollDirection === 'down') {
        target.classList.add('scroll-down-active');
        target.classList.remove('scroll-up-active');
      } else {
        target.classList.add('scroll-up-active');
        target.classList.remove('scroll-down-active');
      }
    } else {
      // Remove both classes when the element leaves the viewport
      target.classList.remove('scroll-down-active', 'scroll-up-active');
    }
  });
}, observerConfig);

// Apply the observer to all your target divs
document.querySelectorAll('.your-target-div-class').forEach(div => {
  viewportObserver.observe(div);
});

3. Edge Case Fixes #

• Initial Page Load: If elements are already in the viewport when the page loads, the default scrollDirection: 'down' will apply the correct initial class.
• Rapid Scrolling: The throttling function prevents the browser from being overwhelmed by too many scroll event calls—adjust the delay if you need more responsiveness.
• Class Conflicts: Double-check your CSS to ensure scroll-down-active and scroll-up-active styles don't override each other accidentally.

4. Alternative: If You're Using Scroll Events for Viewport Detection #

If you originally used a scroll event instead of Intersection Observer, here's how to adapt that code:

function checkViewportElements() {
  const elements = document.querySelectorAll('.your-target-div-class');
  
  elements.forEach(el => {
    const rect = el.getBoundingClientRect();
    const isInViewport = rect.top <= window.innerHeight && rect.bottom >= 0;
    
    if (isInViewport) {
      if (scrollDirection === 'down') {
        el.classList.add('scroll-down-active');
        el.classList.remove('scroll-up-active');
      } else {
        el.classList.add('scroll-up-active');
        el.classList.remove('scroll-down-active');
      }
    } else {
      el.classList.remove('scroll-down-active', 'scroll-up-active');
    }
  });
}

// Run on initial load and scroll (with throttling)
window.addEventListener('load', checkViewportElements);
window.addEventListener('scroll', throttle(checkViewportElements, 100));

This should give you exactly the behavior you want—distinct classes for elements in the viewport depending on whether you're scrolling up or down!

内容的提问来源于stack exchange，提问作者Gracie williams