mirror of
https://github.com/sveltejs/svelte.git
synced 2024-12-01 17:30:59 +01:00
prevent annoying sidebar scrolling glitch
This commit is contained in:
parent
cfb6f52f2b
commit
cd4f987f4e
@ -5,6 +5,7 @@
|
||||
export let sections = [];
|
||||
export let active_section = null;
|
||||
export let show_contents;
|
||||
export let prevent_sidebar_scroll = false;
|
||||
|
||||
onMount(() => {
|
||||
// ------------------------------------------
|
||||
@ -42,8 +43,8 @@
|
||||
|
||||
afterUpdate(() => {
|
||||
// bit of a hack — prevent sidebar scrolling if
|
||||
// TOC is open on mobile
|
||||
if (show_contents && window.innerWidth < 832) return;
|
||||
// TOC is open on mobile, or scroll came from within sidebar
|
||||
if (prevent_sidebar_scroll || show_contents && window.innerWidth < 832) return;
|
||||
|
||||
const active = ul.querySelector('.active');
|
||||
|
||||
@ -97,7 +98,12 @@
|
||||
.active { color: var(--prime) }
|
||||
</style>
|
||||
|
||||
<ul bind:this={ul} class="guide-toc">
|
||||
<ul
|
||||
bind:this={ul}
|
||||
class="guide-toc"
|
||||
on:mouseenter="{() => prevent_sidebar_scroll = true}"
|
||||
on:mouseleave="{() => prevent_sidebar_scroll = false}"
|
||||
>
|
||||
{#each sections as section}
|
||||
<li>
|
||||
<a class="section" class:active="{section.slug === active_section}" href="guide#{section.slug}">
|
||||
|
Loading…
Reference in New Issue
Block a user