如何在滚动条向下滚动所有菜单标题的情况下滚动？

<div class="menu-container">
  <ul class="menu-list">
    <li>菜单标题1</li>
    <li>菜单标题2</li>
    <li>菜单标题3</li>
    <li>菜单标题4</li>
    <li>菜单标题5</li>
    <!-- 其他菜单标题 -->
  </ul>
</div>

.menu-container {
  height: 200px;
  width: 300px;
  overflow: scroll;
}

const menuContainer = document.querySelector('.menu-container');
const menuList = document.querySelector('.menu-list');

menuContainer.addEventListener('scroll', function() {
  const scrollTop = menuContainer.scrollTop;
  menuList.style.transform = `translateY(${scrollTop}px)`;
});