0
0
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:
Richard Harris 2018-12-29 09:25:58 -05:00
parent cfb6f52f2b
commit cd4f987f4e

View File

@ -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}">