Sync Preview Scroll With Monaco Editor

Question

I am building an online code editor that automatically scrolls to what I am working on in the preview and in the code. If I click on an element in preview, I will scroll the code. If my cursor on the code changes to a different line, the preview is updated with the element I am on.

I can scroll on the code editor with the function editor.revealLineInCenter(15); and I can scroll in the preview with the function preview.scrollTop = 500;.

I am stuck at figuring out how to get the scroll levels for both of these. Here is the code.

<script>
  let value = "<h1 class='font-bold'>This is a test</h1>";
  import { onMount } from "svelte";
  let vscode, editor, preview;
  onMount(() => {
    preview.innerHTML = value;
    editor = monaco.editor.create(vscode, {
      value,
      language: "html",
      automaticLayout: true,
    });
    editor.onDidChangeModelContent(() => {
      preview.innerHTML = editor.getValue();
      // First get the line
      preview.scrollTop = 500;
    });
  });

  const scrollEditor = event => {
    let element = event.srcElement;
    
    // First get the line
    editor.revealLineInCenter(15);
  }
</script>

<div class="flex flex-row h-full w-full">
  <div class="flex-1 p-8 bg-primary">
    <div bind:this={vscode} class="w-full h-full" />
  </div>
  <div class="flex-1" bind:this={preview} on:click={scrollEditor}/>
</div>

Question: How do I know how much to scroll from the preview and from the editor?