「内核零 IO」是不是意味着内核很简单？
@@ -2528,6 +2965,18 @@ echo "你好，记住我喜欢喝咖啡" | ./build/waiter
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
+ /* ── SMIL 与 reduced-motion ──
+ CSS 的 prefers-reduced-motion 管不到 SMIL（ 不是 CSS 动画），
+ 实测 reduce 下 6 个数据包照样在跑。故在 JS 里显式停掉：
+ 暂停整棵 SVG 时间轴（pauseAnimations 对 SVG 文档生效）。 */
+ if (reduce) {
+ try {
+ document.querySelectorAll("svg").forEach(function (sv) {
+ if (sv.pauseAnimations) sv.pauseAnimations();
+ });
+ } catch (e) {}
+ }
+
/* ── 入场动画 ── */
if (!reduce) {
root.classList.add("js-fx");
@@ -2545,11 +2994,25 @@ echo "你好，记住我喜欢喝咖啡" | ./build/waiter
}
if ("IntersectionObserver" in window) {
+ // 双向：向下滚入场，向上滚退场 —— 不再 unobserve。
+ // 原先入场后 unobserve，元素永远停在 .in，所以“滚回去”没有任何退场动作，
+ // 读起来就像一页页静态堆叠。
+ // 方向由视口交叉的位置判断（不用全局 scroll 方向，那样在快速滚动时会抖）：
+ // boundingClientRect.top > 0 且向下 → 从下方进来
+ // boundingClientRect.top < 0 → 已滑到上方，停用
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (e) {
- if (e.isIntersecting) { reveal(e.target); io.unobserve(e.target); }
+ if (e.isIntersecting) {
+ reveal(e.target);
+ } else {
+ // 仅当元素确实离开（而非只是未达阈值）才移除，避免边缘抖动
+ var r = e.boundingClientRect;
+ if (r.bottom < 0 || r.top > window.innerHeight) {
+ e.target.classList.remove("in");
+ }
+ }
});
- }, { threshold: 0.1, rootMargin: "0px 0px -6% 0px" });
+ }, { threshold: 0.12, rootMargin: "0px 0px -6% 0px" });
els.forEach(function (el) { io.observe(el); });
} else {
els.forEach(reveal);
@@ -2562,8 +3025,23 @@ echo "你好，记住我喜欢喝咖啡" | ./build/waiter
if (r.top < window.innerHeight && r.bottom > 0) reveal(el);
});
});
- // 兜底：3 秒后无论 observer 是否生效，强制全部可见
- setTimeout(function () { els.forEach(reveal); }, 3000);
+
+ // 比一屏高的节退出吸附。
+ // 为何在运行时做：高度受字体、图片、视口影响，CSS 无法预知。
+ // 不做的话吸附点不等距，累积误差会把后面的节顶到导航栏底下（实测 faq h2 被抬到 -57）。
+ var markTall = function () {
+ var limit = window.innerHeight - 8;
+ [].slice.call(document.querySelectorAll("section")).forEach(function (s) {
+ s.classList.toggle("too-tall", s.getBoundingClientRect().height > limit);
+ });
+ };
+ markTall();
+ window.addEventListener("load", markTall);
+ window.addEventListener("resize", markTall);
+
+ // 不再用「3 秒后强制全部 reveal」的兜底：
+ // 那会把已退场的元素强行拉回来，退场动画就废了。
+ // 改为只在 observer 不存在时（已在上面分支处理）整体 reveal。
}
/* ── 数字滚动 ── */