Scroll Target Group

The Fundamentals of scroll-target-group

The scroll-target-group property designates an element as a scroll marker group container, enabling automatic scroll-spy functionality for its descendant anchor links. When a user scrolls through content sections, the browser tracks which targets are visible and applies the :target-current pseudo-class to the corresponding navigation links.

This approach eliminates the need for JavaScript IntersectionObserver callbacks and manual class toggling. The browser already knows which anchor targets are in view--scroll-target-group simply exposes this capability directly to CSS, allowing you to create sophisticated navigation experiences with declarative styling alone.

Why It Matters for Modern UI Development

Traditional scroll-spy implementations required setting up JavaScript event listeners to track scroll position and update navigation state. This added complexity, performance overhead, and potential for bugs. Scroll Target Group moves this logic entirely into the browser's native implementation, providing better performance through browser-optimized scroll tracking.

The declarative nature of CSS also makes your code easier to understand, test, and maintain. Instead of managing state in JavaScript, you simply declare how active states should appear, and the browser handles the rest.

Property Values

Syntax Example

.navigation {
 scroll-target-group: auto;
}

.navigation a:target-current {
 color: #2563eb;
 font-weight: 600;
}

As part of the CSS Carousel API, scroll-target-group works alongside complementary features like ::scroll-marker and ::scroll-button to enable sophisticated scroll-based interfaces entirely in CSS. For more advanced scroll animations, explore our guide on Scroll Timeline Axis which complements scroll-target-group for creating scroll-driven animations.

If you're building complex single-page applications, combining scroll-target-group with our web development services ensures your navigation experiences are both performant and accessible across all devices.

The :target-current Pseudo-Class

The :target-current pseudo-class is the cornerstone of scroll-target-group functionality. It selects anchor elements within a scroll marker group whose corresponding target section is currently visible in the viewport, enabling CSS-only active state styling without JavaScript.

How :target-current Differs from :target

Understanding the distinction between :target and :target-current is essential for using scroll-target-group effectively.

The standard :target pseudo-class selects the element with the matching ID in the URL fragment--it responds to URL state, not scroll position. When you navigate to page.html#section, the element with id="section" receives the :target state.

In contrast, :target-current responds to scroll position rather than URL state. When a target section enters the viewport as the user scrolls, its corresponding navigation link gains the :target-current pseudo-class. The URL fragment remains unchanged, but the visual state updates dynamically based on which sections are currently visible.

This distinction matters because it allows for passive scroll tracking--you can highlight navigation state without triggering URL changes or history entries, creating smoother navigation experiences.

Practical Styling Patterns

The :target-current pseudo-class opens numerous styling possibilities for navigation components:

Visual Indicator with pseudo-elements:

nav a:target-current::before {
 content: '';
 position: absolute;
 left: 0;
 top: 50%;
 transform: translateY(-50%);
 width: 4px;
 height: 20px;
 background-color: #2563eb;
 border-radius: 0 2px 2px 0;
}

Progress bar integration:

nav a:target-current::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 3px;
 background: linear-gradient(to right, #2563eb, #3b82f6);
}

Smooth transitions between states:

nav a {
 transition: all 0.2s ease;
}

nav a:target-current {
 padding-left: 1.25rem;
 letter-spacing: 0.02em;
}

These patterns create polished, interactive navigation that responds naturally to user scrolling behavior. For additional scroll-based navigation features, see our guide on Scroll Marker Group which works alongside scroll-target-group for enhanced marker management.

Browser Support and Progressive Enhancement

Current Support Status

As of 2025, scroll-target-group is supported in Chromium-based browsers including Chrome and Edge. According to Chrome's CSS Wrapped 2025 feature showcase, this feature is part of the broader CSS Carousel API that Chrome has been actively implementing.

Firefox and Safari do not yet support scroll-target-group, though both browsers have shown interest in implementing CSS carousel features. The MDN documentation marks the feature as having "limited availability" due to this partial browser support.

Feature Detection with @supports

The @supports rule provides clean feature detection for scroll-target-group, enabling progressive enhancement strategies:

/* Base styles always apply - functional navigation */
.navigation a {
 color: #4b5563;
 border-left: 3px solid transparent;
}

/* Enhanced styles when scroll-target-group is supported */
@supports (scroll-target-group: auto) {
 .navigation {
 scroll-target-group: auto;
 }
 
 .navigation a:target-current {
 color: #2563eb;
 font-weight: 600;
 border-left-color: #2563eb;
 background-color: #eff6ff;
 }
}

Fallback Strategy for Unsupported Browsers

For projects requiring broad browser support, design your implementation to work without scroll-target-group, then enhance with CSS when the feature is available. The base experience includes working navigation links that jump to sections via standard anchor behavior--the enhanced experience adds automatic active state highlighting.

This graceful degradation ensures all users can navigate your content, with automatic highlighting as an enhancement for supported browsers. As browser support expands, more users will receive the enhanced experience automatically with no code changes required.

Respecting User Preferences

Always respect the prefers-reduced-motion media query when implementing scroll-based features:

@media (prefers-reduced-motion: reduce) {
 html {
 scroll-behavior: auto;
 }
 
 .navigation a {
 transition: none;
 }
}

This ensures users who experience discomfort with animated content receive a functional, static experience.

Advanced Implementation Patterns

Multi-Level Navigation

For documents with nested sections, create hierarchical navigation where both parent and child sections display active states. This helps users understand their position within the document hierarchy:

/* Parent section active - more prominent styling */
.toc > ul > li > a:target-current {
 font-weight: 700;
 color: #1e40af;
}

/* Child section active - subtle indentation */
.toc ul ul a:target-current {
 background-color: #dbeafe;
 padding-left: 1.5rem;
 border-left-color: #3b82f6;
}

Accessibility Considerations

When implementing scroll-target-group, maintain proper accessibility practices:

• Use semantic <nav> elements with appropriate aria-label attributes
• Ensure navigation links have descriptive text (avoid "click here")
• Maintain logical tab order for keyboard navigation
• Don't rely solely on color to indicate active state--add visual indicators like borders or icons
• Screen readers announce link text normally; the :target-current state is purely visual

Integration with View Transitions

Combine scroll-target-group with the View Transitions API for polished navigation experiences:

/* Smooth scrolling behavior */
html {
 scroll-behavior: smooth;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
 html {
 scroll-behavior: auto;
 }
}

/* Active state with smooth transition */
.toc a {
 transition: all 0.2s ease;
}

When users click navigation links, the view transition can animate smoothly from the current scroll position to the target section, creating a cohesive visual experience that rivals native application navigation.

Performance Optimization

While scroll-target-group is natively implemented, be mindful of scroll-marker count:

• Limit navigation to 5-7 top-level items for optimal performance
• Use hierarchical structures for longer documents
• Consider collapsing related sections under parent navigation items
• Test across different viewport sizes and devices

For long documentation sites, pair scroll-target-group with lazy loading techniques to maintain fast page loads while providing rich navigation. Our web development services team specializes in optimizing complex UI interactions for maximum performance.

Related CSS Features

Scroll-target-group is part of the CSS Carousel API, which includes several complementary features for creating sophisticated scroll-based interfaces:

• ::scroll-marker - Creates pseudo-element markers for scrollable content that can be styled independently
• ::scroll-marker-group - Groups scroll-markers for organized styling and management
• ::scroll-button() - Creates navigation buttons for scrolling containers with automatic state
• :target-before / :target-after - Pseudo-classes for markers positioned before/after the current target

These features work together to enable complete carousel experiences entirely in CSS, reducing reliance on JavaScript while maintaining rich interactivity. The combination of scroll-target-group with these related pseudo-elements allows you to build navigation systems that rival traditional JavaScript implementations.

Explore more CSS features in our guides on CSS Overscroll Behavior and Scroll Timeline Axis for additional scroll-based capabilities. For advanced scroll positioning techniques, also see our guide on Scroll ByLines which complements scroll-target-group for precise scroll control.

Sources

1. MDN Web Docs: scroll-target-group - Official documentation with syntax, values, and examples
2. Chrome.dev: CSS Wrapped 2025 - Chrome's 2025 feature showcase including scroll-target-group and CodePen demos
3. Sara Soueidan: CSS-only scrollspy using scroll-marker-group and :target-current - Deep dive implementation guide and practical examples