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

【问题标题】：scrollTop not working within sidebar nav / divscrollTop 在侧边栏导航 / div 中不起作用
【发布时间】：2019-10-30 03:17:44
【问题描述】：

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

<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 滚动页面的主要内容部分，但我无法让左侧菜单工作。注意：使用鼠标滚轮可以很好地滚动左侧菜单。非常感谢任何帮助。

【问题讨论】：

请您说得更清楚些，或者添加一个完整的例子来说明问题
你能设置一个小提琴吗？

标签： javascript bootstrap-4 sidebar scrolltop scrollable

【解决方案1】：

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

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

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

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

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

【讨论】：