Автоматический генератор каталога знойных статей, чтобы понять

внешний интерфейс GitHub SVG HTML

Этот плагин основан на содержимом выбранного каталогаh1, h2, h3, h4, h5, h6теги для автоматического создания каталогов в выбранном контейнере каталогов и обеспечения приятного эффекта стиля.

  • Отслеживание прокрутки области содержимого
  • Нажмите, чтобы прыгнуть

Совместимость: IE10+ (из-за использованияnode.classList)

Адрес Нажмите здесьгитхаб-адрес, добро пожаловать звезда, вопрос, пр ~

Заинтересованные студенты могут добавить группу WeChat в конце статьи, чтобы общаться вместе~

1. Предварительный просмотр

Холодный режим:

Нормальный режим:

в состоянии пройтиОнлайн ДЕМОДля предварительного просмотра эффекта прохладного режима

2. Идеи реализации

Прокрутка слушателяgetBoundingClientRectПолучите размер элемента и положение относительно области просмотра, чтобы определить наш объект слушателя.h1~h6Находится ли метка в окне просмотра, если да, то добавьтеlinkActiveClassДобрый.

Традиционный переход с позиционированием привязки будет конфликтовать с маршрутизацией одностраничного приложения в хеш-режиме и приведет к неправильному пути маршрутизации.dataset, выньте его и используйте во время прыжковscrollIntoViewдля плавной прокрутки до нужной позиции.

Используется левая боковая панельsvgПуть прорисован, и сделаны некоторые корректировки по уровню, дополнены csstransitionЭффект может показать хороший движущийся эффект.

3. Api

Если вы хотите использовать стиль по умолчанию, импортируйте его вручную.

import 'progress-catalog/src/progress-catalog.css'

Инструкции:

// 引入
import Catalog from 'ProgressCatalog'

// 使用 
new Catalog({
	contentEl: 'loading-animation',
	catalogEl: `catalog-content-wrapper`,
	selector: ['h2', 'h3']
})

Параметры, принимаемые конструктором:

contentEl [String]

Нужно получить селектор id области содержимого сгенерированного каталога, не нужно добавлять #

catalogEl [String]

Селектор идентификатора контейнера каталогов, к которому добавляется сгенерированный каталог, не нужно добавлять #

scrollWrapper [необязательно, строка]

Селектор идентификатора контейнера области содержимого, который прослушивает событие прокрутки, не нужно добавлять #, если он не заполнен, по умолчаниюcontentElродительский элемент

linkclass [необязательно, строка]

Класс для всех элементов каталога, по умолчанию:cl-link

Уведомление, если установлено это значение, вам необходимо переопределить стиль по умолчанию

linkActiveClass [необязательно, строка]

Все классы элементов активного каталога, по умолчанию:cl-link-active

Уведомление, если установлено это значение, вам необходимо переопределить стиль по умолчанию

селектор [необязательный, массив]

Выберите тег заголовка для оглавления, по умолчанию:['h1', 'h2', 'h3', 'h4', 'h5', 'h6']

Если вы хотите создать каталог тегов h2, h3 целевой области содержимого, вы можете установитьselector: ['h2', 'h3']

activeHook [необязательный, функция]

Функция обратного вызова при активации новой метки элемента каталога

topMargin [необязательно, число]

Расстояние, на которое должна сместиться первая метка каталога, прежде чем она станет видимой, по умолчанию: 0

нижнее поле [необязательно, число]

То же, что и выше, расстояние для перемещения вниз, по умолчанию: 0

круто [необязательный, логический]

Переключатель режима охлаждения, по умолчанию:true

Большинство сообщений в Интернете имеют разную глубину и даже некоторые несоответствия. Следующие статьи являются кратким изложением процесса обучения. Если вы найдете какие-либо ошибки, пожалуйста, оставьте сообщение, чтобы указать ~

Ссылаться на:

  1. Руан Ифэн - Учебное пособие по изображениям в формате SVG
  2. Codepen - Progress Nav
  3. MDN - scrollIntoView
  4. MDN - HTMLElement.dataset

PS: Всех приглашаю обратить внимание на мой публичный аккаунт [Front End Afternoon Tea], давайте работать вместе~

Кроме того, вы можете присоединиться к группе WeChat «Front-end Afternoon Tea Exchange Group», нажмите и удерживайте, чтобы определить QR-код ниже, чтобы добавить меня в друзья, обратите вниманиеДобавить группу, я заберу тебя в группу~

Категории