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);
|
||||
return () => io.disconnect();
|
||||
|
||||
@@ -11,6 +11,13 @@ type RevealProps = {
|
||||
once?: boolean;
|
||||
/** Fraction of the element that must be visible to trigger (0-1). */
|
||||
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,
|
||||
once = true,
|
||||
amount = 0.15,
|
||||
margin = "0px 0px 300px 0px",
|
||||
}: RevealProps) {
|
||||
return (
|
||||
<m.div
|
||||
@@ -32,7 +40,7 @@ export function Reveal({
|
||||
custom={delay}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once, amount }}
|
||||
viewport={{ once, amount, margin }}
|
||||
>
|
||||
{children}
|
||||
</m.div>
|
||||
|
||||
Reference in New Issue
Block a user