Javascript 具有灵活高度的同步滚动导航和内容

我的菜单在左边，文章在右边。菜单项和文章项的数量是不确定的

例如，第一个菜单项的高度为100px。 第一件物品的高度为300px

当文章1被滚动到300px时，我希望菜单项-1被滚动到100px。我有下面的代码，同步滚动菜单，但不正确。如何计算每个项目的高度，并将滚动条传递到具有不同高度的article-2和menu-item-2，以此类推

let menuItems = document.getElementsByClassName("menu__item");
let menuHeight = sectionMenu.scrollHeight;
let articleItems = document.getElementsByTagName("article");
let articleHeight = articleItems.scrollHeight;
    
sectionContent.addEventListener("scroll", () => {
  const scrolledContent = sectionContent.scrollTop;
  sectionMenu.scroll(0, scrolledContent / articleHeight * menuHeight);
})