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 的计算。不要忘记添加条件来检查容器中的最后一个.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/

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