Explicação detalhada do rolamento síncrono Idéias de implementação do alinhamento do título de Markodwn

Preciso adicionar a função de rolagem síncrona ao editor do Markodwn que estou escrevendo. Baidu conectou e não encontrou uma ideia melhor. Acabei de escrever um.

O Github é uma biblioteca bem escrita e uma demonstração mais intuitiva.

Github

Este artigo fala principalmente sobre a idéia de implementação.

Existem muitas maneiras de implementar a rolagem síncrona. Basta tornar HTMLElement.scrollTop igual e role a barra de rolagem em proporção e role com o alinhamento do título (foi o que eu vi no Stackedit).

O principal conteúdo deste artigo é como implementar o alinhamento do título e a rolagem síncrona.

Pessoalmente, prefiro o alinhamento do título porque esse método é mais fácil de usar do que os outros dois.

Em princípio, o alinhamento do título é na verdade uma versão aprimorada de rolagem de proporção igual. Porque seu núcleo determina a distância de rolagem calculando a taxa de altura da área de edição e a área de visualização.

Abaixo está uma imagem de gif da demonstração

Nota # à esquerda para sincronizar a rolagem.

Você pode ver que, à medida que a barra de rolagem se move, as distâncias de rolagem nos lados esquerdo e direito são diferentes.

Isso parece um pouco como rolagem de proporção igual, mas eles são diferentes. A diferença é a rolagem de proporção igual determina a distância de rolagem com base na altura do texto completa de ambos os lados, e o alinhamento do título determina a distância de rolagem com base na altura do conteúdo sob o título.

A imagem acima é um diagrama esquemático:

# O cabeçalho representa o título e o conteúdo representa o conteúdo abaixo do título. Eu chamo o título + conteúdo de fragmento.

Eu acho que é mais fácil entender a rolagem de proporção igual, que é calcular a taxa de altura da área de edição e da área de visualização e calcular a distância de rolagem com base na proporção.

O alinhamento do título deve ser mais preciso. Ele substitui a altura da área de edição e a área de visualização pela altura do título + a altura do conteúdo sob o título, ou seja, a altura do clipe e calcula a distância de rolagem com base na altura correspondente do clipe atual.

A altura do MD e a altura HTML no diagrama acima são as alturas dos fragmentos de que precisamos.

É óbvio que, desde que possamos calcular a distância de rolamento correspondente com base na proporção dessas duas alturas.

Primeiro, as informações de título da área de edição e a área de visualização são necessárias, e a estrutura de dados é a seguinte. Use editFragmentsInfo e preFragmentsInfo em vez disso

 Fragmentinfo: {parid, // id offsettop para títulos correspondentes correspondentes à área de edição/área de visualização, // distância da altura do título superior // título mais altura do conteúdo}

Em seguida, você precisa de um método que possa obter o bloco de título na parte superior da página atual e usar getCurrentFragment() .

Em seguida, você precisa enviar uma mensagem para o Previewarea/Editarea no evento de rolagem do Editarea/Previewarea para informar que está prestes a começar a rolar.

Depois de receber outra área, execute as seguintes operações. (Suponha que a área de edição esteja rolando ativamente e a área de visualização esteja rolando passivamente, ou seja, outra área)

1. Primeiro, você precisa obter o título atual na parte superior e usar getCurrentHeading() mencionado acima para obter.
2. Em seguida, corresponda ao título correspondente na área de visualização.
3. O valor calculado com base na proporção de headingInfo.height em ambos os lados, mais o valor de headingInfo.offsetTop é o scrolltop na área de visualização.
4. Até agora, uma sincronização termina. Esse processo está vinculado ao evento de rolagem do elemento e cada rolagem acionará esse processo.

Como a rolagem de um elemento causará a rolagem de outro elemento, isso inevitavelmente formará um loop morto. Portanto, você deve fazer julgamentos em eventos rolantes para evitar um loop morto.

Este é um método simples de exclusão mútua que suporta exclusão mútua de mais de dois objetos.

O exposto acima é uma explicação detalhada das idéias de implementação de rolagem síncrona do alinhamento do título de Markodwn apresentado a você. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem. O editor responderá a você a tempo!