شرح مفصل لأفكار تنفيذ التمرير المتزامنة لمحاذاة عنوان Markodwn

أحتاج إلى إضافة وظيفة التمرير المتزامنة إلى محرر Markodwn الذي أكتبه. لقد قام بايدو بتوصيله ولم يجد فكرة أفضل. لقد كتبت للتو بنفسي.

Github هي مكتبة مكتوبة جيدًا وتوضيح أكثر سهولة.

جيثب

يتحدث هذا المقال بشكل أساسي عن فكرة التنفيذ.

هناك العديد من الطرق لتنفيذ التمرير المتزامن. ما عليك سوى جعل HTMLElement.scrollTop متساوية ، وقم بالتمرير على شريط التمرير بشكل متناسب ، والتمرير مع محاذاة العنوان (هذا ما رأيته على Stackedit).

المحتوى الرئيسي لهذه المقالة هو كيفية تنفيذ محاذاة العنوان والتمرير المتزامن.

أنا شخصياً أفضل محاذاة العنوان لأن هذه الطريقة سهلة الاستخدام أكثر من الآخرين.

من حيث المبدأ ، فإن محاذاة العنوان هي في الواقع نسخة محسنة من التمرير المتساوي للنسبة. لأن جوهرها يحدد مسافة التمرير عن طريق حساب نسبة الارتفاع لمنطقة التحرير ومنطقة المعاينة.

فيما يلي صورة GIF للعروض التجريبية

ملاحظة # على اليسار لمزامنة التمرير.

يمكنك أن ترى أنه مع تحرك شريط التمرير ، تختلف مسافات التمرير على الجانبين الأيسر واليمين.

هذا يشبه إلى حد ما التمرير المتساوي للنسبة ، لكنها مختلفة. الفرق متساوي للتمرير يحدد مسافة التمرير بناءً على ارتفاع النص الكامل لكلا الجانبين ، ويحدد محاذاة العنوان مسافة التمرير بناءً على ارتفاع المحتوى تحت العنوان.

الصورة أعلاه هي مخطط تخطيطي:

# العنوان يمثل العنوان ، ويمثل المحتوى المحتوى أسفل العنوان. أسمي العنوان + محتوى جزء.

أعتقد أنه من الأسهل فهم التمرير المتساوي للنسبة ، وهو حساب نسبة الارتفاع لمنطقة التحرير ومنطقة المعاينة ، ثم حساب مسافة التمرير بناءً على النسبة.

يجب أن تكون محاذاة العنوان أكثر دقة. يحل محل ارتفاع منطقة التحرير ومنطقة المعاينة مع ارتفاع العنوان + ارتفاع المحتوى أسفل العنوان ، أي ارتفاع المقطع ، ثم يحسب مسافة التمرير بناءً على الارتفاع المقابل للمقطع الحالي.

ارتفاع MD وارتفاع HTML في الرسم البياني أعلاه هما مرتفعات الشظايا التي نحتاجها.

من الواضح أنه طالما يمكننا حساب مسافة المتداول المقابلة بناءً على نسبة هاتين المرتفعات.

أولاً ، مطلوب معلومات عنوان منطقة التحرير ومنطقة المعاينة ، وهيكل البيانات كما يلي. استخدم editFragmentsInfo و preFragmentsInfo بدلاً من ذلك

 FragmentInfo: {pairid ، // ID Offsettop لمطابقة العناوين المقابلة لمنطقة التحرير/المعاينة ، // المسافة من ارتفاع الإزاحة العليا // العنوان بالإضافة إلى ارتفاع المحتوى}

ثم تحتاج إلى طريقة يمكنها الحصول على كتلة العنوان في الجزء العلوي من الصفحة الحالية ، واستخدام getCurrentFragment() بدلاً من ذلك.

بعد ذلك ، تحتاج إلى إرسال رسالة إلى معاينة/editarea في حدث التمرير من Editarea/Previewarea لإبلاغها بأنها على وشك البدء في التمرير.

بعد تلقي منطقة أخرى ، قم بإجراء العمليات التالية. (لنفترض أن منطقة التحرير يتم تمريرها بنشاط ، وأن منطقة المعاينة تتمرير بشكل سلبي ، أي منطقة أخرى)

1. أولاً ، تحتاج إلى الحصول على العنوان الحالي في الأعلى واستخدام getCurrentHeading() المذكور أعلاه للحصول على.
2. ثم تطابق العنوان المقابل في منطقة المعاينة.
3. القيمة المحسوبة بناءً على نسبة headingInfo.height headingInfo.offsetTop
4. حتى الآن ، ينتهي التزامن واحد. ترتبط هذه العملية بحدث التمرير للعنصر ، وسيؤدي كل التمرير إلى مثل هذه العملية.

نظرًا لأن تمرير عنصر واحد سيؤدي إلى تمرير عنصر آخر ، فإن هذا سيشكل حتماً حلقة ميتة. لذلك ، يجب أن تصدر أحكامًا في الأحداث المتداولة لتجنب حلقة ميتة.

هذه طريقة استبعاد متبادلة بسيطة تدعم الاستبعاد المتبادل لأكثر من كائنين.

ما سبق هو شرح مفصل لأفكار تنفيذ التمرير المتزامنة لمحاذاة عنوان Markodwn المقدمة لك. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، يرجى ترك رسالة لي. سوف يرد المحرر إليك في الوقت المناسب!