Penjelasan terperinci tentang ide implementasi gulir sinkron dari perataan judul Markodwn

Saya perlu menambahkan fungsi gulir sinkron ke editor Markodwn yang saya tulis. Baidu telah menghubungkannya dan tidak menemukan ide yang lebih baik. Saya baru saja menulisnya sendiri.

GitHub adalah perpustakaan yang ditulis dengan baik dan demo yang lebih intuitif.

GitHub

Artikel ini terutama berbicara tentang gagasan implementasi.

Ada banyak cara untuk menerapkan pengguliran sinkron. Buat saja HTMLElement.scrollTop sama, dan gulir scrollbar secara proporsional, dan gulir dengan perataan judul (ini yang saya lihat di stackedit).

Konten utama dari artikel ini adalah cara mengimplementasikan penyelarasan judul dan pengguliran sinkron.

Secara pribadi, saya lebih suka perataan judul karena metode ini lebih ramah pengguna daripada dua lainnya.

Pada prinsipnya, perataan judul sebenarnya merupakan versi yang lebih baik dari pengguliran proporsi yang sama. Karena inti mereka menentukan jarak pengguliran dengan menghitung rasio ketinggian area pengeditan dan area pratinjau.

Di bawah ini adalah gambar gif demo

Catatan # Di sebelah kiri untuk menyinkronkan pengguliran.

Anda dapat melihat bahwa saat bilah gulir bergerak, jarak pengguliran di sisi kiri dan kanan berbeda.

Ini terlihat seperti pengguliran proporsi yang sama, tetapi mereka berbeda. Perbedaannya adalah gulir proporsi yang sama menentukan jarak gulir berdasarkan ketinggian teks lengkap dari kedua sisi, dan penyelarasan judul menentukan jarak gulir berdasarkan ketinggian konten di bawah judul.

Gambar di atas adalah diagram skematik:

# Heading mewakili judul, dan konten mewakili konten di bawah judul. Saya menyebut judul + konten sebagai fragmen.

Saya pikir lebih mudah untuk memahami pengguliran proporsi yang sama, yaitu untuk menghitung rasio ketinggian area pengeditan dan area pratinjau, dan kemudian menghitung jarak pengguliran berdasarkan rasio.

Penyelarasan judul harus lebih tepat. Ini menggantikan ketinggian area pengeditan dan area pratinjau dengan tinggi judul + ketinggian konten di bawah judul, yaitu, ketinggian klip, dan kemudian menghitung jarak gulir berdasarkan ketinggian yang sesuai dari klip saat ini.

Tinggi MD dan tinggi HTML dalam diagram di atas adalah ketinggian fragmen yang kita butuhkan.

Jelas bahwa selama kita dapat menghitung jarak bergulir yang sesuai berdasarkan rasio kedua ketinggian ini.

Pertama, informasi judul area edit dan area pratinjau diperlukan, dan struktur data adalah sebagai berikut. Gunakan editFragmentsInfo dan preFragmentsInfo sebagai gantinya

 FragmentInfo: {pairid, // ID offsettop untuk judul yang sesuai dengan area pengeditan/area pratinjau, // Jarak dari tinggi offset // judul plus tinggi konten}

Kemudian Anda memerlukan metode yang bisa mendapatkan blok judul di bagian atas halaman saat ini, dan menggunakan getCurrentFragment() sebagai gantinya.

Selanjutnya, Anda perlu mengirim pesan ke Previewarea/Editarea dalam acara gulir Editarea/Previewarea untuk menginformasikan bahwa itu akan mulai menggulir.

Setelah menerima area lain, lakukan operasi berikut. (Misalkan area pengeditan secara aktif menggulir, dan area pratinjau bergulir secara pasif, yaitu, area lain)

1. Pertama, Anda perlu mendapatkan judul saat ini di bagian atas dan menggunakan getCurrentHeading() yang disebutkan di atas untuk mendapatkannya.
2. Kemudian cocokkan judul yang sesuai di area pratinjau.
3. Nilai yang dihitung berdasarkan rasio headingInfo.height headingInfo.offsetTop
4. Sejauh ini, satu sinkronisasi berakhir. Proses ini terikat pada acara gulir elemen, dan setiap gulungan akan memicu proses seperti itu.

Karena pengguliran satu elemen akan menyebabkan pengguliran elemen lain, ini pasti akan membentuk loop mati. Karena itu, Anda harus membuat penilaian dalam acara bergulir untuk menghindari loop dead.

Ini adalah metode eksklusi timbal balik sederhana yang mendukung pengecualian timbal balik lebih dari dua objek.

Di atas adalah penjelasan terperinci tentang ide implementasi gulir sinkron dari perataan judul Markodwn yang diperkenalkan kepada Anda. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan. Editor akan membalas Anda tepat waktu!