On my website, there is a side navigation bar with the following CSS style:
.scroll-box {
overflow: hidden;
width: 128px;
}
.filler {
height: 256px;
overflow-y: auto;
}
.selector {
background-color: #369;
padding: 8px 4px;
text-align: center;
flex-grow: 1;
display: inline-block;
cursor: pointer;
box-sizing: border-box;
transition: .1s !important;
}
.bar {
height: 8px;
width: 100%;
background-color: #808080;
}
.label {
padding: 4px 8px;
background-color: #707070;
}
.active {
background-color: lightgrey;
color: #369;
}<div class="scroll-box">
<div class="label">Dates</div>
<div class="filler">
<div class="selector">4-Aug-16</div>
...
<div class="selector active" id="today">15-Aug-16</div>
...
<div class="selector">4-Aug-16</div>
</div>
<div class="bar"></div>
</div>I am looking for a way to automatically center the view of the side nav bar on the element with the today id without affecting the page scroll. I have experimented with using myUrl#today, but that changes the entire page's scroll position.
Is there a method to solely change the position of the side nav bar scroll to center on the #today element? Any suggestions on how this can be achieved would be greatly appreciated.
I am open to utilizing jQuery and JavaScript for this solution.
Thank you.