滚动后如何检测元素部分可见？React.GA事件触发优化

Great question! The main issues here are frequent scroll triggers causing duplicate events and needing a reliable way to detect when your form is partially visible. Let's break down the solution into actionable steps:

1. Update the isVisible Function for Partial Visibility #

Instead of checking if the entire form is visible, we'll calculate what percentage of the form is in the viewport. Here's a revised version that checks for at least 50% vertical visibility (adjustable based on your needs):

isVisible = (el) => {
  const rect = el.getBoundingClientRect();
  const viewportHeight = window.innerHeight || document.documentElement.clientHeight;

  // If the element is completely outside the viewport, return false
  if (rect.bottom <= 0 || rect.top >= viewportHeight) {
    return false;
  }

  // Calculate how much of the element is visible vertically
  const visibleTop = Math.max(rect.top, 0);
  const visibleBottom = Math.min(rect.bottom, viewportHeight);
  const visibleHeight = visibleBottom - visibleTop;

  // Return true if at least 50% of the form's height is visible
  return (visibleHeight / rect.height) * 100 >= 50;
};

If you want to consider both horizontal and vertical visibility (for cases where the form might be off-screen horizontally), use this area-based calculation instead:

isVisible = (el) => {
  const rect = el.getBoundingClientRect();
  const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
  const viewportWidth = window.innerWidth || document.documentElement.clientWidth;

  // If element is completely outside viewport
  if (rect.bottom <= 0 || rect.top >= viewportHeight || rect.right <= 0 || rect.left >= viewportWidth) {
    return false;
  }

  // Calculate visible dimensions
  const visibleTop = Math.max(rect.top, 0);
  const visibleBottom = Math.min(rect.bottom, viewportHeight);
  const visibleHeight = visibleBottom - visibleTop;
  
  const visibleLeft = Math.max(rect.left, 0);
  const visibleRight = Math.min(rect.right, viewportWidth);
  const visibleWidth = visibleRight - visibleLeft;

  // Calculate percentage of visible area
  const totalArea = rect.height * rect.width;
  const visibleArea = visibleHeight * visibleWidth;
  const visiblePercentage = (visibleArea / totalArea) * 100;

  return visiblePercentage >= 50;
};

2. Add a Flag to Prevent Duplicate GA Events #

We need to track whether the GA event has already been fired so we don't send it multiple times. Add a state variable to your component:

// In your class component (either in constructor or as a class field)
state = {
  gaFormEventFired: false
};

3. Update the onScroll Function #

Modify your scroll handler to only trigger the GA event once when the form becomes visible, then disable further checks:

onScroll = () => {
  // Exit immediately if the event has already been fired
  if (this.state.gaFormEventFired) return;

  const form = document.querySelector('theform');
  if (!form) return;

  if (this.isVisible(form)) {
    // Send your GA event here
    ReactGA.event({
      category: 'User Engagement',
      action: 'Form Scrolled Past',
      label: 'Main Form (50% Visible)'
    });

    // Mark the event as fired to prevent duplicates
    this.setState({ gaFormEventFired: true });

    // Optional: Remove the scroll listener to save resources
    window.removeEventListener('scroll', this.onScroll);
  }
};

4. Optimize Scroll Performance with Throttling #

Scroll events fire extremely frequently, which can hurt performance. Adding a throttle will limit how often your onScroll function runs. Here are two ways to implement this:

Using Lodash: #

import throttle from 'lodash/throttle';

componentDidMount() {
  // Throttle to run every 200ms (adjust delay as needed)
  this.throttledOnScroll = throttle(this.onScroll, 200);
  window.addEventListener('scroll', this.throttledOnScroll);
}

componentWillUnmount() {
  // Clean up the throttled listener
  window.removeEventListener('scroll', this.throttledOnScroll);
}

Simple Custom Throttle (no external library): #

componentDidMount() {
  let lastScrollTime = 0;
  this.throttledOnScroll = () => {
    const now = Date.now();
    // Only run if 200ms have passed since last scroll
    if (now - lastScrollTime >= 200) {
      this.onScroll();
      lastScrollTime = now;
    }
  };
  window.addEventListener('scroll', this.throttledOnScroll);
}

componentWillUnmount() {
  window.removeEventListener('scroll', this.throttledOnScroll);
}

5. Clean Up the Scroll Listener #

Always remove the scroll listener when the component unmounts to avoid memory leaks:

componentWillUnmount() {
  // Use the throttled version if you implemented throttling
  window.removeEventListener('scroll', this.throttledOnScroll || this.onScroll);
}

This setup ensures your GA event is only fired once when the form reaches 50% visibility, while keeping your scroll handling efficient.

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