JS/jQuery -设置侧导航条的滚动条到特定位置

JS/jQuery - set scroll bar of side nav bar to certain position

本文关键字：滚动条 位置 定位 导航 jQuery 设置 JS      更新时间：2023-09-26

我有一个侧边导航条，看起来像这样:

.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">4-Aug-16</div>
    <div class="selector">4-Aug-16</div>
    <div class="selector">4-Aug-16</div>
    <div class="selector">4-Aug-16</div>
    <div class="selector">4-Aug-16</div>
    <div class="selector">4-Aug-16</div>
    <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 class="selector">4-Aug-16</div>
    <div class="selector">4-Aug-16</div>
    <div class="selector">4-Aug-16</div>
    <div class="selector">4-Aug-16</div>
    <div class="selector">4-Aug-16</div>
    <div class="selector">4-Aug-16</div>
    <div class="selector">4-Aug-16</div>
  </div>
  <div class="bar"></div>
</div>

我想得到它，以便当页面加载时，它自动将侧边导航栏的视图居中到today id元素。我试过把myUrl#today，但这会改变整个页面滚动，这是我不想要的。我

我只希望在侧导航条的滚动来改变它的位置和中心的#today位。有人知道这样做的方法吗?

我也愿意使用jQuery和JS。

谢谢。

我认为你可以使用jQuery代码，如

$(document).ready(function(){
  // when document is ready
  // first check if #today is defined in HTML
  // the $('') is the jQuery selector of to select an element
  // $('#today') means select an element with the ID "today"
  // the .length attribute is default javascript attribute to check 
  //     how many of elements selected has existed
  if($('#today').length > 0){
    // the offset() function is a jQuery function that is used for check the
    //    relative distance from the border of current element to its parent
    var distance_to_top = $('#today').offset().top;
    var top_label_height = $('.label').height();
    var distance_to_scroll = distance_to_top - top_label_height - 8; 
    // 8 px is body margin on jsfiddle
    // scrollTop() function is another jQuery function to scroll an     
    //     overflow element
    $('.filler').scrollTop(distance_to_scroll);
  }
});

找到today元素相对于其父元素的偏移量，然后减去标签高度，因为标签将覆盖在#today的顶部。滚动到顶部

可以在这里找到演示

也许这样可以。(我现在不能测试…)。

基本上，我们获取div中没有id为"today"的每个元素，并添加这些元素的高度。当我们最终到达"today"时，我们将滚动条的高度设置为过去所有元素加起来的高度，并退出循环。

$(document).ready(function(){
    var height = 0;
    $(".filler *").each(function () {
        if($(this).is("#today"))
        {
            return false; //to get out of the .each
        }
        else
        {
            height += $(this).height();
        }
    })
    $( "div.demo" ).scrollTop(height); //set the scrollbar
});
相关文章：