javascript - 滚动轴顺滚与回滚，为什么产生的效果不一样？

问题描述

问 题

当滚动轴顺滚的时候，产生的效果是合理的，就是到达指定的位置，就让对应的序号变色，但是当滚动到底部的时候，再往会滚动的时候，就会出现没到指定区域的顶部，对应的色标已经变色了，从我底下提供的代码，
html:
<div class="submenu" id="submenu">

<div class="cirle one" scrollto="#one">1</div>
<div class="line" ></div>
<div class="cirle two" scrollto="#two">2</div>
<div class="line"></div>
<div class="cirle three" scrollto="#three">3</div>
<div class="line"></div>
<div class="cirle four" scrollto="#four">4</div>
<div class="line"></div>
<div class="cirle five" scrollto="#five">5</div>
<div class="line"></div>
<div class="cirle six" scrollto="#six">6</div>

</div>
js:
var circle=$(".cirle")
$(window).on("scroll",scroll)
function scroll(){

var scrtop=$(this).scrollTop();
   $.each(circle,function(){
  if(scrtop>=$($(this).attr("scrollto")).offset().top){
    $(this).addClass("active").siblings().removeClass("active");
  }

 })

}
可以看出，是因为符合了 if(scrtop>=$($(this).attr("scrollto")).offset().top)这个条件，我有两个问题，第一个是：比如到底部的序号6的时候，只要鼠标滚动一点，就会让序号5符合条件，所以就会出现没到序号5对应的区域的顶部，序号5就变色了，那按道理，序号1,2,3,4也符合 if(scrtop>=$($(this).attr("scrollto")).offset().top)这个条件啊，为什么只有5变色了，而1,2，3,，4没变色啊？实在想不通，因为当滚动到6的时候，往回滚动一小段距离，页面body的scrolltop就已经比序号1,2,3,4,5对应的区域的$(this).attr("scrollto")).offset().top大了啊，应该1,2,3,4,5都变色啊？
第二个问题：顺滚的时候，是完全符合预期效果的，到达指定区域顶部，对应的色标就变色，但是反滚的时候，就不行了，有什么方法解决吗？

解决方案

第一个问题，只因你这暴力的 .siblings() ，从 1~6 每次命中都会把其它的还原。

第二个问题，反滚的时候到达顶部也是会变色的，不知道你的预期是什么。

这篇关于javascript - 滚动轴顺滚与回滚，为什么产生的效果不一样？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！