# @cssints/stuck 中文文档

规范地址：https://npmcn.com/package/%40cssints/stuck/

版本：0\.35\.1
npm 元数据更新时间：2026-11-07T14:56:05.474Z
中文译文更新时间：2026-11-11T03:40:53.437Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cssints/stuck
原文对照：https://npmcn.com/package/%40cssints/stuck/?lang=original
项目主页：https://cssints.dev/
源码仓库：https://github.com/alexeiaccio/css-in-ts-compiler

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：13.8 kB，7 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22
- 运行依赖：0 个
- peer 依赖：cssints ^0\.35\.0
- 首次发布：2026-10-10T20:57:56.964Z
- 最新版本发布：2026-11-07T14:56:05.126Z
- 近 30 天下载量：7397（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：43（近 12 个月 43 个）

## 中文简介

粘贴元素被卡住时样式 : @ container 滚动态( stuck) 本地状态, 截面观察员倒置

## 安装

```sh
npm install @cssints/stuck
```

也可以使用：`pnpm add @cssints/stuck`、`yarn add @cssints/stuck`、`bun add @cssints/stuck`

## README

# @ cssints/ stuck (英语)

粘着元素中粘着的样式 [点缀](https://npmcn.com/package/README.md)数字 : `sticky()` 创建元素 粘稠和卷轴状态的容器, `stuck(...)` 将其后代的样式包装在 `@container scroll-state(stuck: top)` (中文(简体) ). 如果目标缺少滚动状态查询, `stuck(...)` 还发出 与一个小的交叉观察者设定的属性下相同的样式 [bramus/ sticky-观察器](https://github.com/bramus/sticky-observer)。 。 。 .

```ts
import { cn, color, hover } from "cssints" with { type: "cssints" };
import { sticky, stuck } from "@cssints/stuck" with { type: "cssints" };

export const header = sticky().top("0"); // <header class={header}>
export const title = cn(color("gray"), stuck(color("red"))); //   <h1 class={title}>
export const footer = sticky().bottom(2);
export const link = stuck("bottom")(color("green"), hover(color("black")));
```

```css
@layer _.k {
  ._stuck-core {
    position: sticky;
    container-type: scroll-state;
  }
}
@layer _.a {
  ._4k81c2 {
    top: 0;
  }
  ._kg6w97 {
    bottom: 0.5rem;
  }
}
@layer _.b {
  @container scroll-state(stuck: top) {
    ._it4l7h {
      color: red;
    }
  }
  /* only when a browserslist target lacks scroll-state queries */
  :where(._g-stuck[data-stuck~="top"]) ._fec935 {
    color: red;
  }
}
```

`header` 实值 `_stuck-core _g-stuck _4k81c2`, (中文(简体) ), `title` 都拿着 `_it4l7h` 财务报告和审定财务报表 `_fec935`。 。 。 .

## 浏览器

-   **土著**数字 : `@container scroll-state()` 财务报告和审定财务报表 `container-type: scroll-state`,克罗姆和边缘133。 不在Firefox 中,或者说 萨法里还没有.
-   **倒计时**数字 : `@cssints/stuck/observer` (约1.3 kB 改进后,无进口) `data-stuck="top"` (议程项目5) 每个边) `sticky()` 元素当它被卡住时,反向规则读取它。 它检查 `CSS.supports("container-type", "scroll-state")` 首先,不做浏览器有查询的地方。 没什么 手导入:运行时条目名称(`script`),因此使用 `sticky()` 进口到 `virtual:cssints/runtime/stuck.observer` 当目标缺少查询时; 当没有查询时, 该模块是空的.
-   倒计时规则只在浏览器列表目标缺少查询时才会出现在工作表中(`chrome 133` 一个人得到 `@container` 只有规则: `stuck()` 询问 `lacking()` 联 合 国 `cssints/plugin`,与支持相同的查询和规则 警告! 警告你们! 内核的支持警告( 它) `requires`、询问及其声明 `container-type: scroll-state`)由观察者覆盖,因此默认目标的一个构件没有打印出.
-   查过Chrome(本地人和被删掉的询问的观察员)、Firefox和WebKit(观察员): `bun run test:browsers`。 。 。 .

## 规则

-   **`sticky()`** 实值 `position: sticky` 财务报告和审定财务报表 `container-type: scroll-state`,其中包含套接字的方法,每个套接字在任意 顺序 : `top()`, (中文(简体) ), `right()`, (中文(简体) ), `bottom()`, (中文(简体) ), `left()`页:1 `<length-percentage>` (单数为相距步,0.25雷姆). 其班级名单也持有 `_g-stuck`,组合标记倒置规则读取.
-   **`stuck(...styles)`** 在最接近时应用样式 `sticky()` 祖先被困在顶端; `stuck(side)(...styles)` 改为 `top`, (中文(简体) ), `right`, (中文(简体) ), `bottom` 或者说 `left`。这是一个条件:它是一个条件(层) `_.b`, (中文(简体) ), 包接其他内容( e)`stuck(hover(...))`并进入其中.
-   **子孙才有.** 滚动状态查询与容器的后代相符,绝不与容器本身相符( 斯克的规则,所以 `stuck()` 样式在粘稠的其中的元素上。 给粘着的盒子自己打个字,放进去 包装在里面.
-   **冲突.** `sticky()` 套装 `position` 财务报告和审定财务报表 `container-type`页:1 `cn()` 与 `position`, (中文(简体) ), `container` 或者说 `container-type` 是一个构建错误,来自内核(写作样式): `cssints: stuck: kernel core sets position, container-type (this style also sets position)`。 。 。 .
-   **错误**:一个坏入格是语法的,在类型上和建设时间上(`sticky.top: unexpected "red" in "red", expected <length-percentage>`),方法两次是 `cssints: sticky().top() is used twice`,而未知的一面是一个类型 错误和 `cssints: stuck: stuck() takes top, right, bottom or left, got "middle"`每一个点在呼叫.

## 限制

-   **倒计时读过一次插图**,当它第一次看到元素时:一个后期媒体查询更改的设置 没有被跟踪。 一个比其滚动容器高的粘性元素没有被报告卡住。 影根不相过.
-   倒背的根是最近的祖先,他的祖先 `overflow` 没有 `visible`, 其它视图;本地查询 遵循真实的滚动容器.
-   无逻辑侧( N)`block-start`, (中文(简体) ), `inline-end`),没有 `scrollable` 或者说 `snapped` 滚动状态查询 .

```bash
cd packages/stuck && bun run test            # fixtures through the engine (output, targets, errors, observer size)
cd packages/stuck && bun run typecheck       # the type test
cd packages/stuck && bun run test:browsers   # Chrome, Firefox and WebKit through playwright-core
```

## 贷项

倒计时 [bramus/ sticky-观察器](https://github.com/bramus/sticky-observer) (麻省理工学院,Bramus Van Damme):一个 由元素的内置加 1px 缩出根的相交观察员 。 观察者写在这里,没有代码 复制.

## 常见问题

### @cssints/stuck 是什么？

粘贴元素被卡住时样式 : @ container 滚动态\( stuck\) 本地状态, 截面观察员倒置

### 如何安装 @cssints/stuck？

在项目目录运行 npm install @cssints/stuck，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：cssints（^0\.35\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @cssints/stuck 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cssints/stuck 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @cssints/stuck 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @cssints/stuck 可以商用吗？

@cssints/stuck 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cssints/stuck 的下载量有多少？

根据 npm 官方下载统计，@cssints/stuck 在 2026/10/11 – 2026/11/09 这 30 天内被下载 7,397 次，日均约 247 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cssints/stuck 还在维护吗？

最新版本 0\.35\.1 发布于 2026/11/07（3 天前）；至今共发布 43 个版本，其中过去 12 个月发布了 43 个；首次发布于 2026/10/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。