Подробное объяснение идеи реализации синхронной прокрутки

Мне нужно добавить функцию синхронной прокрутки в редактор Markodwn, который я пишу. Байду связал его и не нашел лучшей идеи. Я только что написал один сам.

GitHub-хорошо написанная библиотека и более интуитивно понятная демонстрация.

GitHub

В этой статье в основном рассказывается об идее реализации.

Есть много способов реализации синхронной прокрутки. Просто сделайте HTMLElement.scrollTop равным и прокрутите полос прокрутки пропорционально и прокрутите с выравниванием заголовка (это то, что я видел на Stackedit).

Основным содержанием этой статьи является то, как реализовать выравнивание заголовков и синхронную прокрутку.

Лично я предпочитаю выравнивание заголовков, потому что этот метод более удобен для пользователя, чем два других.

В принципе, выравнивание заголовков на самом деле является улучшенной версией прочтения равной пропорции. Потому что их ядро ​​определяет расстояние прокрутки путем расчета отношения высоты площади редактирования и площади предварительного просмотра.

Ниже приведена изображение GIF демонстрации

Примечание # Слева, чтобы синхронизировать прокрутку.

Вы можете видеть это по мере движения полоса прокрутки, расстояния прокрутки с левой и правой стороны разные.

Это похоже на равную пропорцию, но они разные. Разница в равной прочтении просмотра определяет расстояние прокрутки на основе полной высоты текста обеих сторон, а выравнивание заголовка определяет расстояние прокрутки на основе высоты содержания под заголовком.

Приведенная выше картина представляет собой схематическую диаграмму:

# Заголовок представляет заголовок, а контент представляет контент под заголовком. Я называю заголовок + контент фрагментом.

Я думаю, что легче понять равную пропорциональную прокрутку, то есть рассчитать отношение высоты площади редактирования и площади предварительного просмотра, а затем вычислить расстояние прокрутки на основе соотношения.

Выравнивание названия должно быть более точным. Он заменяет высоту области редактирования и область предварительного просмотра высотой заголовка + высота содержания под заголовком, то есть высота зажима, а затем вычисляет расстояние прокрутки на основе соответствующей высоты текущего зажима.

Высота MD и высота HTML на вышеуказанной диаграмме являются высоты необходимых нам фрагментов.

Очевидно, что до тех пор, пока мы можем рассчитать соответствующее расстояние на основе отношения этих двух высот.

Во -первых, требуется информация о заголовке области редактирования и области предварительного просмотра, и структура данных заключается в следующем. Используйте editFragmentsInfo и preFragmentsInfo вместо этого

 FragmentInfo: {paind, // ID OffsetTop для соответствующих названий, соответствующих области редактирования/области предварительного просмотра, // расстояние от высоты верхнего смещения // заголовок плюс плюс высота содержания}

Затем вам нужен метод, который может получить заголовок в верхней части текущей страницы, и вместо этого использовать getCurrentFragment() .

Затем вам нужно отправить сообщение в Previewarea/Editarea в событии Scroll of Editarea/Previewarea, чтобы сообщить об этом, что он собирается начать прокрутку.

После получения другой области выполните следующие операции. (Предположим, что зона редактирования активно прокручивается, а область предварительного просмотра пассивно прокручивает, то есть в другой области)

1. Во -первых, вам нужно получить текущий заголовок вверху и использовать getCurrentHeading() упомянутый выше, чтобы получить.
2. Затем сопоставьте соответствующий заголовок в области предварительного просмотра.
3. Значение, рассчитанное на основе соотношения headingInfo.height с обеих сторон, плюс значение headingInfo.offsetTop - это Scrolltop в области предварительного просмотра.
4. Пока что одна синхронизация заканчивается. Этот процесс связан с событием прокрутки элемента, и каждый прокрутка вызовет такой процесс.

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

Это простой метод взаимного исключения, который поддерживает взаимное исключение более двух объектов.

Выше приведено подробное объяснение идеи реализации синхронной прокрутки, представленных вам. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение. Редактор ответит вам вовремя!