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() {&nbsp; if($(".highlighted").eq(currentPos).length > 0){&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var mainTop = $(".main").position().top;&nbsp; &nbsp; var mainScrlTop = $(".main").scrollTop();&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var pos = $(".highlighted").eq(currentPos).position();&nbsp; &nbsp; $(".highlighted").eq(currentPos).css("color", "red");&nbsp; &nbsp; $(".main").scrollTop(pos.top - mainTop + mainScrlTop);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; currentPos++;&nbsp; }}&nbsp; &nbsp; .main {&nbsp; &nbsp; &nbsp; height: 100px;&nbsp; &nbsp; &nbsp; border:1px solid grey;&nbsp; &nbsp; &nbsp; padding: 10px 20px;&nbsp; &nbsp; &nbsp; overflow: scroll;&nbsp; &nbsp; }<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">&nbsp; &nbsp; <div><span class="highlighted">a</span></div>&nbsp; &nbsp; <div><span class="highlighted">s</span></div>&nbsp; &nbsp; <div><span class="highlighted">v</span></div>&nbsp; &nbsp; <div><span class="highlighted">a</span></div>&nbsp; &nbsp; <div><span class="highlighted">s</span></div>&nbsp; &nbsp; <div><span class="highlighted">v</span></div>&nbsp; &nbsp; <div><span class="highlighted">a</span></div>&nbsp; &nbsp; <div><span class="highlighted">s</span></div>&nbsp; &nbsp; <div><span class="highlighted">v</span></div>&nbsp; &nbsp; <div><span class="highlighted">a</span></div>&nbsp; &nbsp; <div><span class="highlighted">s</span></div>&nbsp; &nbsp; <div><span class="highlighted">v</span></div></div>

Answer 2

除了位置或偏移量之外，您还需要添加滚动高度。$(".main").scrollTop(pos.top&nbsp;+&nbsp;$(".main").get(0).scrollTop);当您使用溢出滚动容器时，偏移或位置函数倾向于从相对位置而不是滚动位置计算。看演示：https&nbsp;:&nbsp;//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">&nbsp; &nbsp; <div><span class="highlighted">a</span></div>&nbsp; &nbsp; <div><span class="highlighted">s</span></div>&nbsp; &nbsp; <div><span class="highlighted">v</span></div>&nbsp; &nbsp; <div><span class="highlighted">a</span></div>&nbsp; &nbsp; <div><span class="highlighted">s</span></div>&nbsp; &nbsp; <div><span class="highlighted">v</span></div>&nbsp; &nbsp; <div><span class="highlighted">a</span></div>&nbsp; &nbsp; <div><span class="highlighted">s</span></div>&nbsp; &nbsp; <div><span class="highlighted">v</span></div>&nbsp; &nbsp; <div><span class="highlighted">a</span></div>&nbsp; &nbsp; <div><span class="highlighted">s</span></div>&nbsp; &nbsp; <div><span class="highlighted">v</span></div></div><pre class="console"></pre>.main {&nbsp; height: 100px;&nbsp; border:1px solid grey;&nbsp; padding: 10px 20px;&nbsp; overflow: scroll;&nbsp; display:block;}.console {&nbsp; display:block;&nbsp; height:100px;&nbsp; border:1px solid grey;&nbsp; padding: 10px 20px;&nbsp; overflow: scroll;}(function($){&nbsp; &nbsp; var itemsLength&nbsp; = $('div.main div span.highlighted').length;&nbsp; &nbsp; var curIndex&nbsp; &nbsp; &nbsp;= 0;&nbsp; &nbsp; var cwindow&nbsp; &nbsp; &nbsp; = $('.console');&nbsp; &nbsp; var button&nbsp; &nbsp; &nbsp; &nbsp;= $('button.gonext');&nbsp; &nbsp; var consolelog = function(message){&nbsp; &nbsp; &nbsp; &nbsp; var text&nbsp; = cwindow.innerHTML;&nbsp; &nbsp; &nbsp; message += "\n";&nbsp; &nbsp; &nbsp; cwindow.prepend(message);&nbsp; &nbsp; };&nbsp; &nbsp; var gonext = function(){&nbsp; &nbsp; &nbsp; &nbsp;consolelog('Button:click:curIndex:'+curIndex);&nbsp; &nbsp; &nbsp; &nbsp;consolelog('Button:click:itemLength:'+itemsLength);&nbsp; &nbsp; &nbsp; &nbsp;var listItem = $( "div.main div span.highlighted" ).eq( curIndex );&nbsp; &nbsp; &nbsp; &nbsp;// all black&nbsp; &nbsp; &nbsp; &nbsp;$("div.main div span.highlighted").css("color", "black");&nbsp; &nbsp; &nbsp; &nbsp;// current red&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;listItem.css("color", "red");&nbsp; &nbsp; &nbsp; &nbsp; curIndex ++;&nbsp; &nbsp; &nbsp; &nbsp; if(curIndex > itemsLength) curIndex = 0;&nbsp; &nbsp; };&nbsp; &nbsp; button.click(function(){&nbsp; &nbsp; &nbsp; &nbsp; gonext();&nbsp; &nbsp; });})(jQuery)