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来使活动菜单项居中，但这不在此问题范围内。

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

1 个答案: