NEW CSS Scroll Features Will Replace JavaScript

Source: Dev.to

Modern CSS That Replaces JavaScript (Part 1) — Scroll‑Based Visibility Without JS

This article is the first part of a series covering modern CSS features that can replace common JavaScript patterns—improving performance, accessibility, and maintainability.

For years, showing or hiding UI elements based on scroll position meant using JavaScript. Modern CSS is changing that narrative. With the introduction of scroll‑driven container queries, we can now manage scroll‑based UI visibility purely with CSS—no JavaScript required.

In this article we’ll build a “Back to Top” button that appears only when the page is scrollable, using the new CSS scroll-state features.

---

Why This Matters

JavaScript scroll handlers can:

• Hurt performance on low‑end devices
• Add unnecessary complexity
• Require debouncing or throttling
• Increase bundle size

Modern CSS gives us:

• Better performance
• Declarative UI behavior
• Cleaner and more maintainable code

---

The Key Concept: scroll-state Container Queries

CSS now allows us to react to scroll conditions using container queries. We define:

1. A scroll container
2. A named scroll state
3. Conditional styles based on scroll position

Step 1: Define the Scroll Container

html {
  container-type: scroll-state;
  container-name: page;
  scroll-behavior: smooth;
}

This turns the html element into a scroll-state container named page.

Step 2: Base Page Styling

html,
body {
  padding: 0;
  margin: 0;
}

.title-header {
  background-color: #4caf50;
  color: white;
  padding: 10px 0;
  text-align: center;
  font-size: 24px;
}

.content {
  max-width: 480px;
  margin: 0 auto;
}

Nothing special here—just layout and typography.

Step 3: Back‑to‑Top Button (Hidden by Default)

.backtotop {
  display: flex;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #000066;
  color: #fff;
  padding: 10px 16px;
  border-radius: 30px;
  font-size: 24px;
  text-decoration: none;

  /* Move the button off‑screen; animations stay smooth */
  translate: 300px 0;
  transition: translate 0.3s ease-in-out;
}

We move the button off‑screen using translate, not display:none, so animations stay smooth.

Step 4: Reveal Button Using a Scroll‑State Query

@container page scroll-state(scrollable: top) {
  .backtotop {
    translate: 0 0;
  }
}

What this means

• When the page becomes scrollable and scrolling is possible from the top, the button slides into view automatically.
• No JavaScript. No scroll listeners.

HTML Markup

<h1>Manage Visibility on Scroll with NO JS</h1>

<h2>NEW CSS Scroll Features Will Replace JavaScript</h2>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>

<a href="#top">Move to top</a>

---

Why This Is a Big Deal

• ✅ Zero JavaScript – eliminates runtime overhead.
• Ideal for:
  • Sticky headers
  • Scroll‑to‑top buttons
  • Progressive disclosure UI
  • Accessibility‑friendly interactions

Browser Support Notes

These features are cutting‑edge and currently supported in modern Chromium‑based browsers. Use progressive enhancement when shipping to production.

---

Final Thoughts

CSS is no longer just about styling—it’s becoming a behavior layer. If you care about:

• Performance
• Maintainability
• Accessibility
• Modern frontend architecture

then scroll-state container queries are absolutely worth learning.

Happy styling, and thanks for reading! 🚀