@ cssints/ stuck (英语)
粘着元素中粘着的样式 点缀数字 : sticky() 创建元素
粘稠和卷轴状态的容器, stuck(...) 将其后代的样式包装在
@container scroll-state(stuck: top) (中文(简体) ). 如果目标缺少滚动状态查询, stuck(...) 还发出
与一个小的交叉观察者设定的属性下相同的样式
bramus/ sticky-观察器。 。 。 .
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")));
@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页:1cn()与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滚动状态查询 .
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-观察器 (麻省理工学院,Bramus Van Damme):一个 由元素的内置加 1px 缩出根的相交观察员 。 观察者写在这里,没有代码 复制.