Fix issue with endless scrolling when previewing a mobile device

This commit is contained in:
Andrew Kingston 2021-09-08 10:22:34 +01:00
parent 87f3659ba4
commit 079634851b
1 changed files with 9 additions and 4 deletions

View File

@ -66,7 +66,12 @@
class:mobile={!!$context.device.mobile} class:mobile={!!$context.device.mobile}
> >
{#if typeClass !== "none"} {#if typeClass !== "none"}
<div class="nav-wrapper" class:sticky class:hidden={isPeeking}> <div
class="nav-wrapper"
class:sticky
class:hidden={isPeeking}
style={`--height:${$context.device.height}px; --width:${$context.device.width}px;`}
>
<div class="nav nav--{typeClass} size--{widthClass}"> <div class="nav nav--{typeClass} size--{widthClass}">
<div class="nav-header"> <div class="nav-header">
{#if validLinks?.length} {#if validLinks?.length}
@ -358,7 +363,7 @@
transform: translateX(0); transform: translateX(0);
width: 250px; width: 250px;
transition: transform 0.26s ease-in-out, opacity 0.26s ease-in-out; transition: transform 0.26s ease-in-out, opacity 0.26s ease-in-out;
height: 100vh; height: var(--height);
opacity: 0; opacity: 0;
background: var(--navBackground); background: var(--navBackground);
z-index: 999; z-index: 999;
@ -381,8 +386,8 @@
display: block; display: block;
top: 0; top: 0;
left: 0; left: 0;
width: 100vw; width: var(--width);
height: 100vh; height: var(--height);
z-index: 998; z-index: 998;
} }
</style> </style>