I am currently working on a web page that features a fixed scrollable sidebar menu styled with Bootstrap on the left side, while the main content is displayed on the right side.
<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>
Below is the CSS for the sidebar menu:
#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;
}
I have attempted to use JavaScript to automatically scroll the sidebar menu to a specific item so that it appears in view. Here are the codes I have tried:
document.getElementById('sidebar').scrollTop = 400;
document.getElementById('menuItem20').scrollIntoView();
location.href = "#menuItem20";
Unfortunately, none of the above methods seem to be working as intended. While I can successfully implement scrolling for the main content section using JavaScript, I am facing difficulties achieving the same for the sidebar menu. It's worth noting that the sidebar menu does scroll properly when using the mouse wheel. Any assistance or guidance on this matter would be greatly appreciated.