คำอธิบายโดยละเอียดเกี่ยวกับแนวคิดการใช้งานการเลื่อนแบบซิงโครนัสของการจัดตำแหน่งชื่อ Markodwn

ฉันต้องเพิ่มฟังก์ชั่นการเลื่อนแบบซิงโครนัสลงในตัวแก้ไข Markodwn ที่ฉันกำลังเขียน Baidu เชื่อมต่อมันและไม่พบความคิดที่ดีกว่า ฉันเพิ่งเขียนด้วยตัวเอง

GitHub เป็นห้องสมุดที่เขียนได้ดีและเป็นการสาธิตที่ใช้งานง่ายมากขึ้น

คนอื่น ๆ

บทความนี้ส่วนใหญ่พูดถึงแนวคิดของการใช้งาน

มีหลายวิธีในการใช้การเลื่อนแบบซิงโครนัส เพียงแค่สร้าง HTMLElement.scrollTop เท่ากันและเลื่อนแถบเลื่อนตามสัดส่วนและเลื่อนด้วยการจัดตำแหน่งชื่อ (นี่คือสิ่งที่ฉันเห็นใน StackEdit)

เนื้อหาหลักของบทความนี้คือวิธีการใช้การจัดตำแหน่งชื่อและการเลื่อนแบบซิงโครนัส

โดยส่วนตัวแล้วฉันชอบการจัดตำแหน่งชื่อเพราะวิธีนี้ใช้งานง่ายกว่าอีกสองคน

โดยหลักการแล้วการจัดตำแหน่งของชื่อนั้นเป็นเวอร์ชันที่ดีขึ้นของการเลื่อนสัดส่วนที่เท่ากัน เนื่องจากแกนกลางของพวกเขากำหนดระยะการเลื่อนโดยการคำนวณอัตราส่วนความสูงของพื้นที่แก้ไขและพื้นที่แสดงตัวอย่าง

ด้านล่างนี้เป็นภาพ GIF ของการสาธิต

หมายเหตุ # ทางด้านซ้ายเพื่อซิงโครไนซ์การเลื่อน

คุณจะเห็นว่าเมื่อแถบเลื่อนเลื่อนระยะทางเลื่อนทางด้านซ้ายและขวาแตกต่างกัน

นี่ดูเหมือนการเลื่อนสัดส่วนที่เท่ากันเล็กน้อย แต่พวกเขาแตกต่างกัน ความแตกต่างคือการเลื่อนสัดส่วนที่เท่ากันกำหนดระยะการเลื่อนขึ้นอยู่กับความสูงของข้อความเต็มของทั้งสองด้านและการจัดตำแหน่งชื่อจะกำหนดระยะทางเลื่อนตามความสูงของเนื้อหาภายใต้ชื่อ

ภาพด้านบนเป็นแผนผังไดอะแกรม:

# หัวเรื่องแสดงถึงชื่อเรื่องและเนื้อหาแสดงเนื้อหาด้านล่างชื่อ ฉันเรียกชื่อเรื่อง + เนื้อหา

ฉันคิดว่ามันง่ายกว่าที่จะเข้าใจการเลื่อนสัดส่วนที่เท่ากันซึ่งคือการคำนวณอัตราส่วนความสูงของพื้นที่การแก้ไขและพื้นที่แสดงตัวอย่างจากนั้นคำนวณระยะการเลื่อนตามอัตราส่วน

การจัดตำแหน่งชื่อควรมีความแม่นยำมากขึ้น มันแทนที่ความสูงของพื้นที่การแก้ไขและพื้นที่แสดงตัวอย่างด้วยความสูงของชื่อ + ความสูงของเนื้อหาภายใต้ชื่อนั่นคือความสูงของคลิปจากนั้นคำนวณระยะห่างจากการเลื่อนตามความสูงที่สอดคล้องกันของคลิปปัจจุบัน

ความสูงของ MD และความสูง HTML ในแผนภาพด้านบนคือความสูงของชิ้นส่วนที่เราต้องการ

เห็นได้ชัดว่าตราบใดที่เราสามารถคำนวณระยะการหมุนที่สอดคล้องกันตามอัตราส่วนของความสูงทั้งสองนี้

ขั้นแรกต้องใช้ข้อมูลชื่อเรื่องของพื้นที่แก้ไขและพื้นที่แสดงตัวอย่างและโครงสร้างข้อมูลมีดังนี้ ใช้ editFragmentsInfo และ preFragmentsInfo แทน

 FragmentInfo: {pairid, // id offsettop สำหรับการจับคู่ชื่อที่สอดคล้องกับพื้นที่การแก้ไข/พื้นที่ดูตัวอย่าง, // ระยะทางจากความสูงออฟเซ็ตด้านบน // ชื่อเรื่องความสูงของเนื้อหา}

จากนั้นคุณต้องมีวิธีการที่สามารถรับบล็อกชื่อเรื่องที่ด้านบนของหน้าปัจจุบันและใช้ getCurrentFragment() แทน

ถัดไปคุณจะต้องส่งข้อความไปยัง PreviewArea/Editarea ในเหตุการณ์เลื่อนของ Editarea/Previewarea เพื่อแจ้งว่ากำลังจะเริ่มเลื่อน

หลังจากได้รับพื้นที่อื่นทำการดำเนินการต่อไปนี้ (สมมติว่าพื้นที่การแก้ไขกำลังเลื่อนอย่างแข็งขันและพื้นที่แสดงตัวอย่างกำลังเลื่อนอย่างอดทนนั่นคือพื้นที่อื่น)

1. ก่อนอื่นคุณต้องได้รับชื่อปัจจุบันที่ด้านบนและใช้ getCurrentHeading() ที่กล่าวถึงข้างต้นเพื่อรับ
2. จากนั้นจับคู่ชื่อที่เกี่ยวข้องในพื้นที่แสดงตัวอย่าง
3. ค่าที่คำนวณตามอัตราส่วนของ headingInfo.height ทั้งสองด้านบวกค่าของ headingInfo.offsetTop เป็น scrolltop ในพื้นที่แสดงตัวอย่าง
4. จนถึงตอนนี้การซิงโครไนซ์หนึ่งครั้งสิ้นสุดลง กระบวนการนี้ถูกผูกไว้กับเหตุการณ์การเลื่อนขององค์ประกอบและการเลื่อนแต่ละครั้งจะกระตุ้นกระบวนการดังกล่าว

เนื่องจากการเลื่อนขององค์ประกอบหนึ่งจะทำให้การเลื่อนขององค์ประกอบอื่นสิ่งนี้จะเกิดการวนซ้ำที่ตายแล้วอย่างหลีกเลี่ยงไม่ได้ ดังนั้นคุณต้องตัดสินใจในการกลิ้งเหตุการณ์เพื่อหลีกเลี่ยงการวนซ้ำที่ตายแล้ว

นี่เป็นวิธีการยกเว้นซึ่งกันและกันอย่างง่ายที่รองรับการยกเว้นซึ่งกันและกันของวัตถุมากกว่าสองวัตถุ

ข้างต้นเป็นคำอธิบายโดยละเอียดเกี่ยวกับแนวคิดการใช้งานการเลื่อนแบบซิงโครนัสของการจัดตำแหน่งชื่อ Markodwn ที่แนะนำให้คุณรู้จัก ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉัน บรรณาธิการจะตอบกลับคุณทันเวลา!