fix: 资料流提早显现内容,避免空白缺口被误认为到底
Reveal 加 300px 前置 viewport margin,内容在进入视口前淡入; 无限滚动预加载触发线 200px → 1000px,下一页提前请求。 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -62,7 +62,9 @@ export function MessageStream({ scope }: MessageStreamProps) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ rootMargin: "200px" },
|
// Prefetch the next page well before the sentinel is visible so content
|
||||||
|
// is already in place as the user scrolls — no blank gap at the bottom.
|
||||||
|
{ rootMargin: "1000px" },
|
||||||
);
|
);
|
||||||
io.observe(el);
|
io.observe(el);
|
||||||
return () => io.disconnect();
|
return () => io.disconnect();
|
||||||
|
|||||||
@@ -11,6 +11,13 @@ type RevealProps = {
|
|||||||
once?: boolean;
|
once?: boolean;
|
||||||
/** Fraction of the element that must be visible to trigger (0-1). */
|
/** Fraction of the element that must be visible to trigger (0-1). */
|
||||||
amount?: number;
|
amount?: number;
|
||||||
|
/**
|
||||||
|
* Root margin for the in-view trigger (same semantics as IntersectionObserver
|
||||||
|
* `rootMargin`). The default positive bottom value reveals each block ~300px
|
||||||
|
* *before* it scrolls into view, so long feeds never show a blank gap that
|
||||||
|
* reads as "the bottom" before content fades in.
|
||||||
|
*/
|
||||||
|
margin?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -24,6 +31,7 @@ export function Reveal({
|
|||||||
className,
|
className,
|
||||||
once = true,
|
once = true,
|
||||||
amount = 0.15,
|
amount = 0.15,
|
||||||
|
margin = "0px 0px 300px 0px",
|
||||||
}: RevealProps) {
|
}: RevealProps) {
|
||||||
return (
|
return (
|
||||||
<m.div
|
<m.div
|
||||||
@@ -32,7 +40,7 @@ export function Reveal({
|
|||||||
custom={delay}
|
custom={delay}
|
||||||
initial="hidden"
|
initial="hidden"
|
||||||
whileInView="visible"
|
whileInView="visible"
|
||||||
viewport={{ once, amount }}
|
viewport={{ once, amount, margin }}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</m.div>
|
</m.div>
|
||||||
|
|||||||
Reference in New Issue
Block a user