Detailed explanation of the synchronous scrolling implementation ideas of Markodwn title alignment

I need to add the synchronous scrolling function to the Markodwn editor I am writing. Baidu has connected it and found no better idea. I just wrote one myself.

Github is a well-written library and a more intuitive demo.

Github

This article mainly talks about the idea of ​​implementation.

There are many ways to implement synchronous scrolling. Just make HTMLElement.scrollTop equal, and scroll the scrollbar in proportion, and scroll with title alignment (this is what I saw on stackedit).

The main content of this article is how to implement title alignment and synchronous scrolling.

Personally, I prefer title alignment because this method is more user-friendly than the other two.

In principle, title alignment is actually an improved version of equal proportion scrolling. Because their core determines the scrolling distance by calculating the height ratio of the editing area and the preview area.

Below is a GIF picture of DEMO

Note # on the left to synchronize scrolling.

You can see that as the scroll bar moves, the scrolling distances on the left and right sides are different.

This looks a bit like equal proportion scrolling, but they are different. The difference is equal proportion scrolling determines the scroll distance based on the full text height of both sides, and the title alignment determines the scroll distance based on the height of the content under the title.

The above picture is a schematic diagram:

# heading represents the title, and content represents the content below the title. I call the title + content a fragment.

I think it is easier to understand equal proportion scrolling, which is to calculate the height ratio of the editing area and the preview area, and then calculate the scrolling distance based on the ratio.

The title alignment should be more precise. It replaces the height of the editing area and the preview area with the title height + the height of the content under the title, that is, the height of the clip, and then calculates the scroll distance based on the corresponding height of the current clip.

The md height and html height in the above diagram are the heights of the fragments we need.

It is obvious that as long as we can calculate the corresponding rolling distance based on the ratio of these two heights.

First, the title information of the edit area and the preview area is required, and the data structure is as follows. Use editFragmentsInfo and preFragmentsInfo instead

 FragmentInfo: { pairId, // id offsetTop for matching titles corresponding to the editing area/preview area, // distance from top offset height // title plus content height}

Then you need a method that can get the title block at the top of the current page, and use getCurrentFragment() instead.

Next, you need to send a message to the previewArea/editArea in the scroll event of the editArea/previewArea to inform it that it is about to start scrolling.

After receiving another area, perform the following operations. (Suppose that the editing area is actively scrolling, and the preview area is passively scrolling, that is, another area)

1. First, you need to get the current title at the top and use getCurrentHeading() mentioned above to get.
2. Then match the corresponding title in the preview area.
3. The value calculated based on the ratio of headingInfo.height on both sides plus the value of headingInfo.offsetTop is the scrollTop in the preview area.
4. So far, one synchronization ends. This process is bound to the scroll event of the element, and each scroll will trigger such a process.

Because the scrolling of one element will cause the scrolling of another element, this will inevitably form a dead loop. Therefore, you must make judgments in rolling events to avoid a dead loop.

This is a simple mutual exclusion method that supports mutual exclusion of more than two objects.

The above is a detailed explanation of the synchronous scrolling implementation ideas of Markodwn title alignment introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message. The editor will reply to you in time!