scrollTop在侧边栏导航/ div中不起作用

Question

我有一个网页，左侧有引导程序样式的固定可滚动侧栏菜单，右侧是主要内容。

<div class="wrapper">
   <nav id="sidebar">
      <ul id="mainMenu">
         <li id="menuItem1">item 1</li>
         <li id="menuItem2">item 2</li>
         <li id="menuItem3">item 3</li>
         .
         .
         .
      </ul>
   </nav>
   <div id="content">
      Main contents goes here on the right side...
   </div>
</div>

这是侧边栏菜单的CSS：

#sidebar {
  width: 250px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  transition: all 0.3s;
}
#content {
  width: calc(100% - 250px);
  min-height: 100vh;
  position: absolute;
  top: 0;
  right: 0;
}

[这里是一些JavaScript代码，我试图将侧边栏菜单滚动到某个项目，以便该项目向上滚动到视图中。我通过使用一些修复滚动值进行测试

document.getElementById('sidebar').scrollTop = 400;
document.getElementById('menuItem20').scrollIntoView();
location.href = "#menuItem20";

以上代码均无效。我可以使用javascript滚动页面的主要内容部分，但是我无法使左侧菜单正常工作。注意：使用鼠标滚轮，左侧菜单滚动良好。非常感谢您的帮助。

Answer 1

感谢您的帮助。我解决了这个问题。我使用的是我在网上找到的侧边栏菜单模板，该模板使用了名为“ mCustomScrollbar”的插件。这是阻止正常的javascript滚动工作的原因。幸运的是，该插件确实提供了自己的滚动功能。这对我有用：

var yOffset = $("menuItem20").position().top;

$("#sidebar").mCustomScrollbar({
   theme:"minimal"
});

$("#sidebar").mCustomScrollbar("scrollTo", yOffset);

这段代码对我来说的目的是，在重新加载网页时，始终将活动菜单项自动滚动到视图中。也可以使用window.innerHeight计算最佳yOffset来使活动菜单项居中，但这不在此问题的范围内。