全新 CSS 滚动功能将取代 JavaScript

Source: Dev.to

现代 CSS 替代 JavaScript（第 1 部分）— 基于滚动的可见性，无需 JS

本文是一个系列的第一篇，介绍可以取代常见 JavaScript 模式的现代 CSS 功能——提升性能、可访问性和可维护性。

多年来，根据滚动位置显示或隐藏 UI 元素都需要使用 JavaScript。现代 CSS 正在改变这种局面。随着 scroll‑driven container queries（滚动驱动容器查询）的引入，我们现在可以仅使用 CSS 管理基于滚动的 UI 可见性——不再需要 JavaScript。

在本文中，我们将使用全新的 CSS scroll-state 功能构建一个“返回顶部”按钮，该按钮仅在页面可滚动时出现。

---

为什么这很重要

JavaScript 滚动处理程序会：

• 在低端设备上影响性能
• 增加不必要的复杂度
• 需要防抖或节流
• 增大打包体积

现代 CSS 为我们提供：

• 更好的性能
• 声明式的 UI 行为
• 更简洁、更易维护的代码

---

核心概念：scroll-state 容器查询

CSS 现在允许我们通过容器查询响应滚动条件。我们需要定义：

1. 滚动容器
2. 命名的滚动状态
3. 基于滚动位置的条件样式

步骤 1：定义滚动容器

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

这会把 html 元素变成一个名为 page 的 scroll-state 容器。

步骤 2：基础页面样式

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;
}

这里没有特殊处理——仅是布局和排版。

步骤 3：返回顶部按钮（默认隐藏）

.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;

  /* 将按钮移出屏幕；动画保持流畅 */
  translate: 300px 0;
  transition: translate 0.3s ease-in-out;
}

我们使用 translate 将按钮移出屏幕，而不是 display:none，这样动画仍然流畅。

步骤 4：使用滚动状态查询显示按钮

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

这意味着

• 当页面变得可滚动 且 可以从顶部开始滚动时，按钮会自动滑入视图。
• 完全不需要 JavaScript，也不需要滚动监听器。

HTML 标记

<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>

---

为什么这是一件大事

• ✅ 零 JavaScript – 消除运行时开销。
• 适用场景：
  • 粘性标题
  • 返回顶部按钮
  • 渐进式披露 UI
  • 友好的可访问性交互

浏览器支持说明

这些功能属于前沿技术，目前在现代 Chromium 系列浏览器中受支持。发布到生产环境时请使用渐进增强的方式。

---

结束语

CSS 已不再仅仅是样式层——它正逐步成为行为层。如果你关注：

• 性能
• 可维护性
• 可访问性
• 现代前端架构

那么 scroll-state 容器查询绝对值得学习。

祝你玩得开心，感谢阅读！ 🚀