T45c Site · Home: full screen locks the page's overflow and Lenis halts on it, ending a glide in flight
This commit is contained in:
1 parent
03f40c4b86
commit
d7dbcfbb18
2 files changed
+5
-4
No files matched your search
@@ -47,11 +47,11 @@ export function Live({ page, story, title }: { page: string; story: string; titl
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!full) return;
|
if (!full) return;
|
||||||
document.body.style.overflow = "hidden";
|
document.documentElement.style.overflow = "hidden";
|
||||||
const escape = (event: KeyboardEvent) => event.key === "Escape" && setFull(false);
|
const escape = (event: KeyboardEvent) => event.key === "Escape" && setFull(false);
|
||||||
addEventListener("keydown", escape);
|
addEventListener("keydown", escape);
|
||||||
return () => {
|
return () => {
|
||||||
document.body.style.overflow = "";
|
document.documentElement.style.overflow = "";
|
||||||
removeEventListener("keydown", escape);
|
removeEventListener("keydown", escape);
|
||||||
};
|
};
|
||||||
}, [full]);
|
}, [full]);
|
||||||
@@ -61,7 +61,7 @@ export function Live({ page, story, title }: { page: string; story: string; titl
|
|||||||
<button className="skip-live" onClick={() => after.current?.focus()}>
|
<button className="skip-live" onClick={() => after.current?.focus()}>
|
||||||
Skip the live example
|
Skip the live example
|
||||||
</button>
|
</button>
|
||||||
<div className={full ? "live full" : "live"} data-lenis-prevent={full || undefined}>
|
<div className={full ? "live full" : "live"}>
|
||||||
<iframe key={run} ref={frame} title={`${title}, live`} src={src(start)} />
|
<iframe key={run} ref={frame} title={`${title}, live`} src={src(start)} />
|
||||||
{state !== "ready" && (
|
{state !== "ready" && (
|
||||||
<div className="live-state" role="status">
|
<div className="live-state" role="status">
|
||||||
|
|||||||
@@ -61,7 +61,8 @@ export function Shell() {
|
|||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (still) return;
|
if (still) return;
|
||||||
const lenis = new Lenis({ autoRaf: true });
|
// It halts while the page's overflow is hidden, as full screen sets.
|
||||||
|
const lenis = new Lenis({ autoRaf: true, autoToggle: true });
|
||||||
// A glide in flight must not outlive its page.
|
// A glide in flight must not outlive its page.
|
||||||
const off = router.subscribe("onBeforeNavigate", () => lenis.scrollTo(lenis.animatedScroll, { immediate: true, force: true }));
|
const off = router.subscribe("onBeforeNavigate", () => lenis.scrollTo(lenis.animatedScroll, { immediate: true, force: true }));
|
||||||
return () => {
|
return () => {
|
||||||
|
|||||||
Reference in new issue
Block a user