내가 쓰고있는 Markodwn 편집기에 동기 스크롤 함수를 추가해야합니다. 바이두는 그것을 연결했고 더 나은 아이디어를 찾지 못했습니다. 방금 스스로 썼습니다.
Github는 잘 쓰여진 라이브러리이며보다 직관적 인 데모입니다.
github
이 기사는 주로 구현 아이디어에 대해 이야기합니다.
소개하다 동기 스크롤을 구현하는 방법에는 여러 가지가 있습니다. HTMLElement.scrollTop 동일하게 만들고 스크롤 바를 비례 적으로 스크롤하고 제목 정렬로 스크롤하십시오 (이것은 내가 Stackedit에서 본 것입니다).
이 기사의 주요 내용은 제목 정렬 및 동기 스크롤을 구현하는 방법입니다.
개인적 으로이 방법은 다른 두 가지보다 사용자 친화적이기 때문에 제목 정렬을 선호합니다.
원칙적으로, 제목 정렬은 실제로 동일한 비율 스크롤의 개선 된 버전입니다. 코어는 편집 영역과 미리보기 영역의 높이 비율을 계산하여 스크롤 거리를 결정하기 때문입니다.
데모아래는 데모의 GIF 사진입니다
스크롤을 동기화하기 위해 왼쪽의 참고 번호.
스크롤 막대가 움직일 때 왼쪽과 오른쪽의 스크롤 거리가 다르다는 것을 알 수 있습니다.
이것은 동일한 비율 스크롤과 비슷하지만 다릅니다. 차이는 동일한 비율로 스크롤 스크롤은 양쪽의 전체 텍스트 높이를 기반으로 스크롤 거리를 결정하고 제목 정렬은 제목 아래의 컨텐츠 높이를 기반으로 스크롤 거리를 결정합니다.
아이디어위의 그림은 회로도입니다.
# 제목은 제목을 나타내고 콘텐츠는 제목 아래의 내용을 나타냅니다. 제목 + 내용을 조각이라고합니다.
편집 영역과 미리보기 영역의 높이 비율을 계산 한 다음 비율에 따라 스크롤 거리를 계산하는 동일한 비율 스크롤을 이해하는 것이 더 쉽다고 생각합니다.
제목 정렬이 더 정확해야합니다. 편집 영역의 높이와 미리보기 영역을 제목 높이 + 제목 아래의 컨텐츠의 높이, 즉 클립의 높이로 대체 한 다음 현재 클립의 해당 높이를 기반으로 스크롤 거리를 계산합니다.
위의 다이어그램에서 MD 높이와 HTML 높이는 우리가 필요한 조각의 높이입니다.
이 두 높이의 비율에 따라 해당 롤링 거리를 계산할 수있는 한 명백합니다.
특정 프로세스 먼저 편집 영역 및 미리보기 영역의 제목 정보가 필요하며 데이터 구조는 다음과 같습니다. 대신 editFragmentsInfo 및 preFragmentsInfo 사용하십시오
FragmentInfo : {pairid, // 편집 영역/미리보기 영역에 해당하는 제목을 일치시키기위한 // id 오프셋 탑, // 상단 오프셋 높이에서의 거리 // 제목 + 컨텐츠 높이} 그런 다음 현재 페이지 상단에서 제목 블록을 가져올 수있는 메소드가 필요하고 대신 getCurrentFragment() 사용해야합니다.
다음으로, Editarea/Previewarea의 스크롤 이벤트에서 프리뷰어/editarea에 메시지를 보내서 스크롤링을 시작하려고합니다.
다른 영역을 수신 한 후 다음 작업을 수행하십시오. (편집 영역이 적극적으로 스크롤되고 미리보기 영역이 수동적으로 스크롤되어 다른 영역이라고 가정합니다)
getCurrentHeading() 사용하여 얻을 수 있습니다.headingInfo.height 의 비율에 따라 계산 된 값과 headingInfo.offsetTop 의 값은 미리보기 영역의 스크롤 탑입니다.하나의 요소를 스크롤하면 다른 요소의 스크롤이 발생하므로 필연적으로 죽은 루프가 형성됩니다. 따라서 죽은 루프를 피하기 위해 롤링 이벤트에 대한 판단을 내려야합니다.
이것은 두 개 이상의 객체의 상호 배제를 지원하는 간단한 상호 배제 방법입니다.
요약위의 것은 당신에게 소개 된 Markodwn 제목 정렬의 동기 스크롤 구현 아이디어에 대한 자세한 설명입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨주세요. 편집자는 제 시간에 당신에게 답장 할 것입니다!