/
githubmirror
/
30-seconds-of-code
Обзор
Документация
Войти
/
githubmirror
/
30-seconds-of-code
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
src/astro/scripts/toc.js
56 строк
1 KB
Angelos Chalaris
Add scrollspy web component for ToC
28 мар 2025, 20:16
Не верифицирован
28 мар 2025, 20:16
7afca7c
Код
Авторство
О чём код?
class TableOfContents extends HTMLElement { constructor() { super(); this.observer = null; this.current = null; this.timeout = null; this.links = [...this.querySelectorAll('a')]; this.observableElements = document.querySelectorAll( 'main > article > :is(h2, h3, h4) > a[id]' ); this.observe(); window.addEventListener('resize', () => { if (this.observer) { this.observer.disconnect(); this.observer = null; } clearTimeout(this.timeout); this.timeout = setTimeout(() => this.observe(), 200); }); } updateCurrent(entries) { for (const { isIntersecting, target } of entries) { if (!isIntersecting) continue; const link = this.links.find(link => link.hash === '#' + target.id); if (!link || this.current === link) continue; this.current?.removeAttribute('aria-current'); link.setAttribute('aria-current', 'true'); this.current = link; break; } } observe() { if (this.observer) return; this.observer = new IntersectionObserver( entries => this.updateCurrent(entries), { rootMargin: this.getRootMargin() } ); this.observableElements.forEach(el => this.observer.observe(el)); } getRootMargin() { return `-32px 0% ${128 - document.documentElement.clientHeight}px`; } } customElements.define('table-of-contents', TableOfContents);