أحتاج إلى إضافة وظيفة التمرير المتزامنة إلى محرر Markodwn الذي أكتبه. لقد قام بايدو بتوصيله ولم يجد فكرة أفضل. لقد كتبت للتو بنفسي.
Github هي مكتبة مكتوبة جيدًا وتوضيح أكثر سهولة.
جيثب
يتحدث هذا المقال بشكل أساسي عن فكرة التنفيذ.
يقدم هناك العديد من الطرق لتنفيذ التمرير المتزامن. ما عليك سوى جعل HTMLElement.scrollTop متساوية ، وقم بالتمرير على شريط التمرير بشكل متناسب ، والتمرير مع محاذاة العنوان (هذا ما رأيته على Stackedit).
المحتوى الرئيسي لهذه المقالة هو كيفية تنفيذ محاذاة العنوان والتمرير المتزامن.
أنا شخصياً أفضل محاذاة العنوان لأن هذه الطريقة سهلة الاستخدام أكثر من الآخرين.
من حيث المبدأ ، فإن محاذاة العنوان هي في الواقع نسخة محسنة من التمرير المتساوي للنسبة. لأن جوهرها يحدد مسافة التمرير عن طريق حساب نسبة الارتفاع لمنطقة التحرير ومنطقة المعاينة.
العرض التوضيحيفيما يلي صورة GIF للعروض التجريبية
ملاحظة # على اليسار لمزامنة التمرير.
يمكنك أن ترى أنه مع تحرك شريط التمرير ، تختلف مسافات التمرير على الجانبين الأيسر واليمين.
هذا يشبه إلى حد ما التمرير المتساوي للنسبة ، لكنها مختلفة. الفرق متساوي للتمرير يحدد مسافة التمرير بناءً على ارتفاع النص الكامل لكلا الجانبين ، ويحدد محاذاة العنوان مسافة التمرير بناءً على ارتفاع المحتوى تحت العنوان.
الأفكارالصورة أعلاه هي مخطط تخطيطي:
# العنوان يمثل العنوان ، ويمثل المحتوى المحتوى أسفل العنوان. أسمي العنوان + محتوى جزء.
أعتقد أنه من الأسهل فهم التمرير المتساوي للنسبة ، وهو حساب نسبة الارتفاع لمنطقة التحرير ومنطقة المعاينة ، ثم حساب مسافة التمرير بناءً على النسبة.
يجب أن تكون محاذاة العنوان أكثر دقة. يحل محل ارتفاع منطقة التحرير ومنطقة المعاينة مع ارتفاع العنوان + ارتفاع المحتوى أسفل العنوان ، أي ارتفاع المقطع ، ثم يحسب مسافة التمرير بناءً على الارتفاع المقابل للمقطع الحالي.
ارتفاع MD وارتفاع HTML في الرسم البياني أعلاه هما مرتفعات الشظايا التي نحتاجها.
من الواضح أنه طالما يمكننا حساب مسافة المتداول المقابلة بناءً على نسبة هاتين المرتفعات.
عملية محددة أولاً ، مطلوب معلومات عنوان منطقة التحرير ومنطقة المعاينة ، وهيكل البيانات كما يلي. استخدم editFragmentsInfo و preFragmentsInfo بدلاً من ذلك
FragmentInfo: {pairid ، // ID Offsettop لمطابقة العناوين المقابلة لمنطقة التحرير/المعاينة ، // المسافة من ارتفاع الإزاحة العليا // العنوان بالإضافة إلى ارتفاع المحتوى} ثم تحتاج إلى طريقة يمكنها الحصول على كتلة العنوان في الجزء العلوي من الصفحة الحالية ، واستخدام getCurrentFragment() بدلاً من ذلك.
بعد ذلك ، تحتاج إلى إرسال رسالة إلى معاينة/editarea في حدث التمرير من Editarea/Previewarea لإبلاغها بأنها على وشك البدء في التمرير.
بعد تلقي منطقة أخرى ، قم بإجراء العمليات التالية. (لنفترض أن منطقة التحرير يتم تمريرها بنشاط ، وأن منطقة المعاينة تتمرير بشكل سلبي ، أي منطقة أخرى)
getCurrentHeading() المذكور أعلاه للحصول على.headingInfo.height headingInfo.offsetTopنظرًا لأن تمرير عنصر واحد سيؤدي إلى تمرير عنصر آخر ، فإن هذا سيشكل حتماً حلقة ميتة. لذلك ، يجب أن تصدر أحكامًا في الأحداث المتداولة لتجنب حلقة ميتة.
هذه طريقة استبعاد متبادلة بسيطة تدعم الاستبعاد المتبادل لأكثر من كائنين.
لخصما سبق هو شرح مفصل لأفكار تنفيذ التمرير المتزامنة لمحاذاة عنوان Markodwn المقدمة لك. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، يرجى ترك رسالة لي. سوف يرد المحرر إليك في الوقت المناسب!