Javascript/jQuery scrollTop 滚动时上下跳动

Question

我有一个函数，每次调用 gonext() 时都会在类的每个实例(“突出显示”)之间跳转。

完整代码如下:

var currentPos = 0;
function gonext() {
  var pos = $(".highlighted").eq(currentPos).position();
  console.log(Math.round(pos.top));
  $(".highlighted").eq(currentPos).css("color", "red");
  currentPos++;
  $(".main").scrollTop(pos.top);
}

    

.main {
  height: 100px;
  border:1px solid grey;
  padding: 10px 20px;
  overflow: scroll;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<hr>
<button onclick="gonext()">Got to Next</button>
<hr>

<div class="main">
    <div><span class="highlighted">a</span></div>
    <div><span class="highlighted">s</span></div>
    <div><span class="highlighted">v</span></div>
    <div><span class="highlighted">a</span></div>
    <div><span class="highlighted">s</span></div>
    <div><span class="highlighted">v</span></div>
    <div><span class="highlighted">a</span></div>
    <div><span class="highlighted">s</span></div>
    <div><span class="highlighted">v</span></div>
    <div><span class="highlighted">a</span></div>
    <div><span class="highlighted">s</span></div>
    <div><span class="highlighted">v</span></div>
</div>
    
   

问题是，一旦它滚动到下一个位置，它就会向上滚动然后向下滚动。

有关更多信息，请参阅控制台日志位置。

我怎样才能解决这个问题，让它只滚动到下一个等等......没有向上/向下跳转？

Answer 1

您必须添加一些 .main top 和 scrollTop 的计算。不要忘记添加条件以检查 .main 容器中的最后一个 .highlighted 元素。否则它会抛出错误。

var currentPos = 0;
function gonext() {
  if($(".highlighted").eq(currentPos).length > 0){
    
    var mainTop = $(".main").position().top;
    var mainScrlTop = $(".main").scrollTop();
    
    var pos = $(".highlighted").eq(currentPos).position();
    $(".highlighted").eq(currentPos).css("color", "red");
    $(".main").scrollTop(pos.top - mainTop + mainScrlTop);
    
    currentPos++;
  }
}

    .main {
      height: 100px;
      border:1px solid grey;
      padding: 10px 20px;
      overflow: scroll;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<hr>
<button onclick="gonext()">Got to Next</button>
<hr>

<div class="main">
    <div><span class="highlighted">a</span></div>
    <div><span class="highlighted">s</span></div>
    <div><span class="highlighted">v</span></div>
    <div><span class="highlighted">a</span></div>
    <div><span class="highlighted">s</span></div>
    <div><span class="highlighted">v</span></div>
    <div><span class="highlighted">a</span></div>
    <div><span class="highlighted">s</span></div>
    <div><span class="highlighted">v</span></div>
    <div><span class="highlighted">a</span></div>
    <div><span class="highlighted">s</span></div>
    <div><span class="highlighted">v</span></div>
</div>