IntersectionObserver

Rare Earth Juejin Tech Community

Mar 7, 2025 · Frontend Development

Optimizing Infinite‑Scroll Waterfall Layouts with CSS Grid, IntersectionObserver, and Modern Browser Features

This article explains how to build a high‑performance infinite‑scroll waterfall layout for e‑commerce using CSS Grid, IntersectionObserver, native lazy‑loading attributes, asynchronous decoding, React's useTransition, content‑visibility, and the AVIF image format to reduce load time and improve smoothness.

AVIFCSS GridIntersectionObserver

0 likes · 13 min read

Optimizing Infinite‑Scroll Waterfall Layouts with CSS Grid, IntersectionObserver, and Modern Browser Features

Rare Earth Juejin Tech Community

Nov 15, 2023 · Frontend Development

Understanding and Using IntersectionObserver for Lazy Loading, Scroll Animations, Infinite Scrolling, and Virtual Lists

This article introduces the IntersectionObserver API, explains its constructor, options, and entry properties, and demonstrates practical applications such as lazy loading images, scroll‑triggered animations, infinite scrolling, and virtual list rendering with complete code examples.

IntersectionObserverScroll AnimationWeb API

0 likes · 11 min read

Understanding and Using IntersectionObserver for Lazy Loading, Scroll Animations, Infinite Scrolling, and Virtual Lists

JD Tech

Oct 20, 2023 · Frontend Development

Common Methods for Listening to List Item Exposure in Frontend Development

This article explains why front‑end data‑collection (exposure) points are crucial, outlines three main techniques—estimating visibility from paginated data, listening to scroll events with bounding‑box calculations, and using the IntersectionObserver API—detailing their implementation, advantages, drawbacks, and best‑practice usage across H5, mini‑programs, and Taro.

IntersectionObserverTaroexposure tracking

0 likes · 23 min read

Common Methods for Listening to List Item Exposure in Frontend Development

HomeTech

Oct 11, 2023 · Frontend Development

Implementing a Sticky Tabs Component with Custom Scroll Behavior in React

This article explains how to build a customizable Tabs component with a sticky header, click‑to‑scroll navigation, and collapsible content sections using React, CSS position:sticky, IntersectionObserver, and JavaScript, providing complete code examples and compatibility notes for modern web and mobile applications.

CSSIntersectionObserverJavaScript

0 likes · 10 min read

Implementing a Sticky Tabs Component with Custom Scroll Behavior in React

JD Retail Technology

Aug 3, 2023 · Frontend Development

Exposure Tracking for List Elements in Frontend Development

This article explains why exposure tracking (埋点) is essential for front‑end developers, compares three implementation methods—pagination‑based estimation, scroll‑event calculations, and the Intersection Observer API—provides detailed advantages, drawbacks, code examples, and platform‑specific guidance for Web, mini‑programs, and Taro frameworks.

IntersectionObserverexposure trackingfrontend

0 likes · 21 min read

Exposure Tracking for List Elements in Frontend Development

政采云技术

Aug 2, 2023 · Frontend Development

Encapsulating DOM Exposure: From Scroll Listener to IntersectionObserver

This article describes how to abstract and improve DOM exposure tracking by first using a scroll listener with getBoundingClientRect and then refactoring to a more robust IntersectionObserver implementation, including code examples, configuration details, and compatibility considerations.

DOMIntersectionObserverJavaScript

0 likes · 8 min read

Encapsulating DOM Exposure: From Scroll Listener to IntersectionObserver

政采云技术

Oct 25, 2022 · Frontend Development

Optimizing Large List Rendering: A Guide to Implementing Virtual Lists Using IntersectionObserver

This technical guide explores how to optimize frontend performance when rendering large datasets by implementing virtual lists using the native IntersectionObserver API, detailing configuration steps, troubleshooting common rendering issues, and comparing its asynchronous advantages against traditional scroll event listeners.

DOM optimizationIntersectionObserverJavaScript API

0 likes · 10 min read

Optimizing Large List Rendering: A Guide to Implementing Virtual Lists Using IntersectionObserver

DaTaobao Tech

Sep 20, 2022 · Frontend Development

Understanding Intersection Observer API and Its Polyfill Implementation

The article explains how the Intersection Observer API offloads visibility detection from scroll events to improve performance, details its creation, options, callback structure, and entry data, and describes a polyfill that mimics native behavior using event listeners, mutation observers, and geometric calculations for broader browser support.

IntersectionObserverJavaScriptPerformance

0 likes · 16 min read

Understanding Intersection Observer API and Its Polyfill Implementation

IT Services Circle

Feb 16, 2022 · Frontend Development

Using Browser Observer APIs: IntersectionObserver, MutationObserver, ResizeObserver, PerformanceObserver, and ReportingObserver

This article explains how to use the five browser Observer APIs—IntersectionObserver, MutationObserver, ResizeObserver, PerformanceObserver, and ReportingObserver—to monitor element visibility, attribute changes, size adjustments, performance metrics, and browser interventions, providing code examples and practical use cases.

IntersectionObserverMutationObserverPerformanceObserver

0 likes · 10 min read

Using Browser Observer APIs: IntersectionObserver, MutationObserver, ResizeObserver, PerformanceObserver, and ReportingObserver

ByteFE

Aug 18, 2021 · Frontend Development

Understanding and Using the Intersection Observer API for Visibility Detection in Frontend Development

This article explains the purpose, core concepts, configuration options, callback handling, and practical use‑cases of the Intersection Observer API—such as lazy loading, infinite scrolling, sticky headers, and analytics—while providing complete Vue 3 code examples and compatibility notes.

Infinite ScrollIntersectionObserverSticky Header

0 likes · 21 min read

Understanding and Using the Intersection Observer API for Visibility Detection in Frontend Development

Ctrip Technology

Jul 15, 2021 · Frontend Development

Optimizing List Rendering Performance in Taro3 Using a Custom Virtual List

This article examines the performance bottlenecks of a Taro3 mini‑program list page after migrating from Taro1, analyzes causes such as excessive node rendering and large setState payloads, evaluates backend pagination and the built‑in virtual list, and presents a custom virtual‑list implementation that reduces rendered nodes, uses screen‑height placeholders, and achieves roughly 45% faster rendering and 50% quicker interaction response.

IntersectionObserverPerformance OptimizationTaro

0 likes · 12 min read

Optimizing List Rendering Performance in Taro3 Using a Custom Virtual List

政采云技术

Mar 30, 2021 · Frontend Development

Implementing Front‑end Exposure Tracking with a Custom Vue Directive

This article explains how to build a reliable front‑end exposure (view) tracking solution for e‑commerce pages by using the native IntersectionObserver API together with a custom Vue directive, covering the definition of effective exposure, required business rules, and complete code implementation.

Custom DirectiveIntersectionObserverJavaScript

0 likes · 11 min read

Implementing Front‑end Exposure Tracking with a Custom Vue Directive