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

你必须添加一些.maintop 和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>

Answer 2

所以，基本上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>

Answer 3

除了位置或偏移量之外，还需要添加滚动高度。

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

当你使用溢出滚动容器时，偏移量或位置函数倾向于从相对位置计算，而不是滚动位置。

查看演示：https://jsfiddle.net/tive/e3Ls529c/

Answer 4

也许尝试遍历列表项的索引。 赞https://jsfiddle.net/vL2sayt4/15/

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<hr>
<button class="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>
<pre class="console"></pre>

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