gpt4 book ai didi

jquery - 单击时从当前位置滚动到下一个 div

转载 作者:可可西里 更新时间:2023-11-01 13:29:10 26 4
gpt4 key购买 nike

在我当前从一个 div 滚动到另一个 div 的解决方案中,我同时支持 previousnext

这通过保存上次滚动到的 div 的索引来确定下一个滚动到的位置。但是,当用户使用滚轮滚动时,这会中断。我想知道是否有办法计算哪个 div 最接近窗口顶部,然后确定下一个滚动到哪个索引。

这反过来会消除我遇到的问题。

使用我当前的解决方案测试错误:


  1. 转到 jsfiddle 链接
  2. 点击向下箭头两次。它应该从一个 div 滚动到下一个。
  3. 接下来,使用鼠标滚轮向下滚动页面的 3/4。
  4. 现在再次点击向下箭头。您会发现它会将您带回到您上次离开的顶部。

http://jsfiddle.net/JokerMartini/yj9pvz2a/1/

var curr_el_index = 0;
var els_length = $(".section").length;

$('.btnNext').click(function () {
curr_el_index++;
if (curr_el_index >= els_length) curr_el_index = 0;
$("html, body").animate({
scrollTop: $(".section").eq(curr_el_index).offset().top - 20
}, 700);
});

$('.btnPrev').click(function () {
curr_el_index--;
if (curr_el_index < 0) curr_el_index = els_length - 1;
$("html, body").animate({
scrollTop: $(".section").eq(curr_el_index).offset().top - 20
}, 700);
});

解决方案已更新: http://jsfiddle.net/JokerMartini/82wo9e3c/1/

最佳答案

您可以使用 jquery 偏移量 (http://api.jquery.com/offset/) 检索元素相对于文档的当前偏移量。所以你可以使用这样的东西:

function getTopElement(elements){
var topEl;
$.each(elements, function(index,el){
if(!topEl || topEl.offset().top < el.offset().top){
topEl = el;
}
});

return topEl;
}

关于jquery - 单击时从当前位置滚动到下一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32764245/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com