After using the helpful tips provided on this StackOverflow question on how to synchronize the scroll bars between an editor (such as for markdown) and a preview panel, I cleaned it up to make it more re-usable.
Just include this anywhere you define your scripts (I'd recommend a script declared in your head so you don't have to mess with window.onload
silliness.
function synchronizeScroll(editorId, previewId) {
function syncScroll(from, to) {
const scrollFrom = from.scrollHeight - from.clientHeight;
const scrollTo = to.scrollHeight - to.clientHeight;
if (scrollFrom < 1) {
return;
}
const percentage = (from.scrollTop / scrollFrom) * 100;
to.scrollTop = (scrollTo / 100) * percentage;
}
window.addEventListener("load", () => {
var currentScrollEvent, timer;
var editor = document.getElementById(editorId);
var preview = document.getElementById(previewId);
function bindScrollEvent(from, to) {
from.addEventListener("scroll", () => {
if (currentScrollEvent === to) {
return;
}
clearTimeout(timer);
currentScrollEvent = from;
syncScroll(from, to);
timer = setTimeout(() => currentScrollEvent = null, 200);
});
}
bindScrollEvent(editor, preview);
bindScrollEvent(preview, editor);
});
}
Usage:
synchronizeScroll("post-body", "post-body-preview");
This assumes that the editor (a textarea
for me has an id of post-body
and the preview div (with an overflow-y
) has an id of post-body-preview
.