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. Не забудьте добавить условие для проверки последнего элемента .highlighted в контейнере .main. В противном случае он выдаст ошибку.

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>

Answer 2

Вам необходимо добавить высоту прокрутки в дополнение к позиции или смещению.

$(".main").scrollTop(pos.top + $(".main").get(0).scrollTop);

Когда вы используете контейнеры с прокруткой переполнения, функция смещения или положения имеет тенденцию вычислять по относительной позиции, а не по прокруткепозиция.

См. демонстрацию: https://jsfiddle.net/tive/e3Ls529c/

Answer 3

возможно, попробуйте пройтись по индексам пунктов списка. Как https://jsfiddle.net/vL2sayt4/15/

Got to Next


    a
    s
    v
    a
    s
    v
    a
    s
    v
    a
    s
    v

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

(function($){
    var itemsLength  = $('div.main div span.highlighted').length;
    var curIndex     = 0;
    var cwindow      = $('.console');
    var button       = $('button.gonext');
    var consolelog = function(message){
        var text  = cwindow.innerHTML;
      message += "\n";
      cwindow.prepend(message);
    };
    var gonext = function(){
       consolelog('Button:click:curIndex:'+curIndex);
       consolelog('Button:click:itemLength:'+itemsLength);
       var listItem = $( "div.main div span.highlighted" ).eq( curIndex );
       // all black
       $("div.main div span.highlighted").css("color", "black");
       // current red 
       listItem.css("color", "red");
        curIndex ++;
        if(curIndex > itemsLength) curIndex = 0;
    };
    button.click(function(){
        gonext();
    });
})(jQuery)

Answer 4

Итак, в основном position() это не то, что вы ищете.

Исходя из моего личного опыта, всякий раз, когда я хочу перейти к некоторым элементам, offsetTop является более точным.

var currentPos = 0;
function gonext() {
  var pos = $(".highlighted").eq(currentPos)[0].offsetTop;
  
  $(".highlighted").eq(currentPos).css("color", "red");
  $(".main").scrollTop(pos);
  console.log(currentPos)
  console.log($(".highlighted").eq(currentPos)[0].offsetTop)
  currentPos++;
}

.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>