Hey there! I get it—trying to build that smooth, full-page section-scrolling experience like fullPage.js but hitting performance issues from over-firing scroll events is super frustrating. Let’s break down how to fix this and get consistent behavior across mobile and desktop.

Why Scroll Events Are a Problem #

The scroll event fires constantly as the user scrolls—like, hundreds of times per second. That’s a huge performance hit, especially on mobile where resources are tighter. Instead, we can use more targeted events and APIs to get the same behavior without the overhead.

Step-by-Step Solution #

1. Ditch Scroll Events—Use Wheel/Touch Events Instead #

For desktop, listen to the wheel event (it tells you direction and scroll delta without spamming). For mobile, use touch events (touchstart, touchmove, touchend) to detect swipe direction. This way, we only act when the user initiates a scroll/swipe, not on every tiny pixel movement.

2. Calculate Section Boundaries First #

First, get the height (or width, for horizontal scroll) of each section and their offset positions from the top of the container. Store these in an array so you can quickly look up where to scroll next.

In Angular, you can do this with ViewChildren and ElementRef:

@ViewChildren('section') sections!: QueryList<ElementRef<HTMLElement>>;
sectionPositions: number[] = [];

ngAfterViewInit() {
  this.sectionPositions = this.sections.map(section => {
    return section.nativeElement.offsetTop;
  });
}

3. Detect Scroll/Swipe Direction & Target Section #

• Desktop (Wheel Event): Check event.deltaY—positive means scrolling down, negative means up. Calculate which section is closest to the current scroll position, then scroll to the next/previous one.
• Mobile (Touch Events): Track the start and end touch positions. If the user swipes up (endY < startY), scroll down; if swipes down, scroll up.

4. Smooth Scroll with RequestAnimationFrame #

Instead of using scrollTo directly, wrap the scroll in requestAnimationFrame to ensure it’s synced with the browser’s repaint cycle for buttery smoothness. You can also add easing for a more natural feel.

Here’s a simplified Angular example:

currentSectionIndex = 0;
container = document.getElementById('scroll-container');
startY = 0;

handleWheel(event: WheelEvent) {
  event.preventDefault(); // Prevent native scroll interference

  const direction = event.deltaY > 0 ? 1 : -1;
  const nextIndex = Math.max(0, Math.min(this.sectionPositions.length - 1, this.currentSectionIndex + direction));
  
  if (nextIndex !== this.currentSectionIndex) {
    this.currentSectionIndex = nextIndex;
    this.scrollToSection(this.sectionPositions[nextIndex]);
  }
}

handleTouchStart(event: TouchEvent) {
  this.startY = event.touches[0].clientY;
}

handleTouchEnd(event: TouchEvent) {
  const endY = event.changedTouches[0].clientY;
  const swipeThreshold = 50; // Minimum swipe distance to trigger scroll

  if (endY < this.startY - swipeThreshold) {
    // Swipe up -> scroll to next section
    this.navigateSection(1);
  } else if (endY > this.startY + swipeThreshold) {
    // Swipe down -> scroll to previous section
    this.navigateSection(-1);
  }
}

navigateSection(direction: number) {
  const nextIndex = Math.max(0, Math.min(this.sectionPositions.length - 1, this.currentSectionIndex + direction));
  if (nextIndex !== this.currentSectionIndex) {
    this.currentSectionIndex = nextIndex;
    this.scrollToSection(this.sectionPositions[nextIndex]);
  }
}

scrollToSection(targetPosition: number) {
  requestAnimationFrame(() => {
    this.container?.scrollTo({
      top: targetPosition,
      behavior: 'smooth' // Use custom easing here for more control if needed
    });
  });
}

5. Disable Native Scroll Conflicts #

Make sure your scroll container has overflow: hidden (or auto with default scroll events prevented) so the browser’s native scroll doesn’t clash with your custom behavior.

Bonus: Use Intersection Observer for Edge Cases #

If you want to handle scenarios like users manually dragging the scrollbar, use the IntersectionObserver API to detect when a section enters the viewport and update your currentSectionIndex accordingly. This is way more efficient than scroll events.

ngAfterViewInit() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const index = this.sections.toArray().findIndex(sec => sec.nativeElement === entry.target);
        if (index !== -1) {
          this.currentSectionIndex = index;
        }
      }
    });
  }, { threshold: 0.5 }); // Trigger when 50% of the section is visible

  this.sections.forEach(section => {
    observer.observe(section.nativeElement);
  });
}

Key Takeaways #

• Avoid scroll events like the plague for this use case—wheel/touch events are far more efficient.
• Precompute section positions to avoid recalculating on every interaction.
• Use requestAnimationFrame and smooth scrolling for a native-app feel.
• Handle both desktop and mobile inputs explicitly to ensure consistent behavior across devices.

This approach will get you that polished, fullPage-like experience without the performance hit from over-firing scroll events.

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