Javascript/jQuery scroll顶部在滚动时上下跳跃

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顶部和滚动顶部的计算。不要忘记添加条件以检查容器.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)