jquery 的垂直滑块
vertical slider with jquery
我想得到的:
向下滚动时转到下一个 div 内容
向上滚动时转到上一个 div 内容
我写了一些代码,但他的工作有巨大的跳跃滞后和冻结......
我不知道我哪里弄错了。谁能帮帮我?
var lastScrollTop = 0;
$('.wrapper').on('scroll', function () {
var st = $('.wrapper').scrollTop();
if (st > lastScrollTop){
$(".wrapper").animate({
scrollTop: $("#one").offset().top
}, 600);
} else {
$(".wrapper").animate({
scrollTop: $("#two").offset().top
}, 600);
}
lastScrollTop = st;
});
编辑:所有人都必须像这样工作one。当滚动 .wrapper div 向上或向下
-> 转到 next/previous div 内容块
重要的是要认识到 scroll
事件在滚动期间被触发 很多 ,而不仅仅是在滚动结束或滚动开始时。这意味着 .scroll()
内的所有内容也将被触发相同的数量。特别是当它与每次都需要发生的动画混合时,这会导致开销。
最重要的是,您会希望在触发新的滚动事件时结束之前的动画。为此,请使用 jQuery 的 .stop()
or finish()
停止动画。
看起来像这样:
var lastScrollTop = 0;
$('.wrapper').on('scroll', function () {
var st = $('.wrapper').scrollTop();
if (st > lastScrollTop){
$(".wrapper").finish().animate({
scrollTop: $("#one").offset().top
}, 600);
} else {
$(".wrapper").finish().animate({
scrollTop: $("#two").offset().top
}, 600);
}
lastScrollTop = st;
});
要进一步优化,您可能需要限制触发事件的数量。这通常由 throttling or debouncing.
完成
在您的示例中,它看起来像这样,加上一些额外的清理:
var lastScrollTop = 0,
wrap = $(".wrapper");
wrap.on('scroll', $.throttle(250, sectionMagnet));
function sectionMagnet() {
var st = wrap.scrollTop();
var el = (st > lastScrollTop) ? $("#one") : $("#two");
wrap.finish().animate({
scrollTop: el.offset().top
}, 600);
lastScrollTop = st;
}
我想得到的: 向下滚动时转到下一个 div 内容 向上滚动时转到上一个 div 内容 我写了一些代码,但他的工作有巨大的跳跃滞后和冻结...... 我不知道我哪里弄错了。谁能帮帮我?
var lastScrollTop = 0;
$('.wrapper').on('scroll', function () {
var st = $('.wrapper').scrollTop();
if (st > lastScrollTop){
$(".wrapper").animate({
scrollTop: $("#one").offset().top
}, 600);
} else {
$(".wrapper").animate({
scrollTop: $("#two").offset().top
}, 600);
}
lastScrollTop = st;
});
编辑:所有人都必须像这样工作one。当滚动 .wrapper div 向上或向下
-> 转到 next/previous div 内容块
重要的是要认识到 scroll
事件在滚动期间被触发 很多 ,而不仅仅是在滚动结束或滚动开始时。这意味着 .scroll()
内的所有内容也将被触发相同的数量。特别是当它与每次都需要发生的动画混合时,这会导致开销。
最重要的是,您会希望在触发新的滚动事件时结束之前的动画。为此,请使用 jQuery 的 .stop()
or finish()
停止动画。
看起来像这样:
var lastScrollTop = 0;
$('.wrapper').on('scroll', function () {
var st = $('.wrapper').scrollTop();
if (st > lastScrollTop){
$(".wrapper").finish().animate({
scrollTop: $("#one").offset().top
}, 600);
} else {
$(".wrapper").finish().animate({
scrollTop: $("#two").offset().top
}, 600);
}
lastScrollTop = st;
});
要进一步优化,您可能需要限制触发事件的数量。这通常由 throttling or debouncing.
完成在您的示例中,它看起来像这样,加上一些额外的清理:
var lastScrollTop = 0,
wrap = $(".wrapper");
wrap.on('scroll', $.throttle(250, sectionMagnet));
function sectionMagnet() {
var st = wrap.scrollTop();
var el = (st > lastScrollTop) ? $("#one") : $("#two");
wrap.finish().animate({
scrollTop: el.offset().top
}, 600);
lastScrollTop = st;
}