Svelte использование

Для интеграции Smooth Scroll в проект на Svelte сначала необходимо установить библиотеку. Обычно используется пакет smooth-scroll через npm:

npm install smooth-scroll

После установки библиотеку импортируют в нужный компонент Svelte:

<script>
  import SmoothScroll from 'smooth-scroll';
  
  let scroll;
  
  // Инициализация Smooth Scroll после монтирования компонента
  onMount(() => {
    scroll = new SmoothScroll('a[href*="#"]', {
      speed: 800,
      speedAsDuration: true,
      offset: 50,
      easing: 'easeInOutCubic',
      updateURL: false
    });
  });
</script>

Ключевые параметры:

  • speed — скорость анимации скролла в миллисекундах.
  • speedAsDuration — если true, время анимации фиксировано, независимо от расстояния.
  • offset — смещение от целевого элемента, полезно при фиксированной шапке.
  • easing — функция плавности анимации (linear, easeInOutCubic и др.).
  • updateURL — обновлять URL при скролле или нет.

Создание якорных ссылок

Smooth Scroll работает с якорными ссылками, поэтому структура HTML в Svelte-компоненте должна содержать идентификаторы:

<nav>
  <a href="#section1">Раздел 1</a>
  <a href="#section2">Раздел 2</a>
  <a href="#section3">Раздел 3</a>
</nav>

<section id="section1">
  <h2>Раздел 1</h2>
  <p>Контент первого раздела...</p>
</section>

<section id="section2">
  <h2>Раздел 2</h2>
  <p>Контент второго раздела...</p>
</section>

<section id="section3">
  <h2>Раздел 3</h2>
  <p>Контент третьего раздела...</p>
</section>

С Smooth Scroll все клики по ссылкам будут анимированы, а пользователь не увидит резкого прыжка к разделу.

Динамическая инициализация

В Svelte часто компоненты создаются динамически, поэтому Smooth Scroll рекомендуется инициализировать после монтирования через onMount:

<script>
  import { onMount } from 'svelte';
  import SmoothScroll from 'smooth-scroll';

  onMount(() => {
    const scroll = new SmoothScroll('a[href*="#"]', {
      speed: 600,
      offset: 80,
      easing: 'easeInOutQuart'
    });
  });
</script>

Если добавляются новые ссылки динамически, можно пересоздавать экземпляр Smooth Scroll или использовать метод destroy() перед повторной инициализацией, чтобы избежать конфликтов.

Настройка смещения для фиксированных шапок

При использовании фиксированных элементов, таких как шапка сайта, важно учитывать смещение через параметр offset:

scroll = new SmoothScroll('a[href*="#"]', {
  speed: 700,
  offset: 100
});

Если шапка имеет динамическую высоту, можно использовать функцию для вычисления смещения:

scroll = new SmoothScroll('a[href*="#"]', {
  speed: 700,
  offset: () => document.querySelector('header').offsetHeight
});

Программный скролл к элементу

Smooth Scroll позволяет программно прокручивать страницу к нужному элементу через метод animateScroll:

import { onMount } from 'svelte';
import SmoothScroll from 'smooth-scroll';

let scroll;

onMount(() => {
  scroll = new SmoothScroll('a[href*="#"]');
  
  // Прокрутка к элементу с id="section2"
  scroll.animateScroll(document.querySelector('#section2'));
});

Можно указать дополнительные параметры, например speed и offset:

scroll.animateScroll(document.querySelector('#section2'), null, {
  speed: 900,
  offset: 50
});

Управление событиями скролла

Smooth Scroll предоставляет возможность отслеживать события:

  • before — перед началом анимации.
  • after — после завершения анимации.

Пример добавления колбэков:

scroll = new SmoothScroll('a[href*="#"]', {
  speed: 700,
  before: (anchor, toggle) => {
    console.log('Скролл к', anchor);
  },
  after: (anchor, toggle) => {
    console.log('Скролл завершён для', anchor);
  }
});

Это полезно для выполнения дополнительных действий, например, активации классов на навигационных ссылках.

Интеграция с переходами Svelte

Smooth Scroll хорошо сочетается с анимациями и переходами Svelte. При использовании transition:fade или кастомных переходов важно инициализировать Smooth Scroll после того, как элемент появился в DOM:

<section id="section1" transition:fade>
  <h2>Раздел 1</h2>
</section>
onMount(() => {
  const scroll = new SmoothScroll('a[href*="#"]');
});

При необходимости можно использовать tick() для ожидания завершения рендера:

import { tick } from 'svelte';

onMount(async () => {
  await tick();
  const scroll = new SmoothScroll('a[href*="#"]');
});

Советы по оптимизации

  • Использовать селектор 'a[href*="#"]' для выбора только якорных ссылок.
  • Вызывать destroy() при размонтировании компонента для предотвращения утечек памяти:
onDestroy(() => {
  scroll.destroy();
});
  • Минимизировать количество вызовов animateScroll, особенно при динамическом создании контента.
  • Для больших страниц устанавливать speedAsDuration: true, чтобы анимация была предсказуемой.

Smooth Scroll в Svelte позволяет легко создать плавный и контролируемый скролл с высокой гибкостью настроек, совместимый с динамическим рендерингом компонентов и фиксированными элементами интерфейса.

Оглавление