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.
introduzir 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.
DemonstraçãoAbaixo 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.
IdéiasA 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.
Processo específico 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)
getCurrentHeading() mencionado acima para obter.headingInfo.height em ambos os lados, mais o valor de headingInfo.offsetTop é o scrolltop na área de visualização.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.
ResumirO 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!