1

我正在使用scrollTo 插件创建一个长的垂直页面,您可以在单击或按键时滚动到每个新帖子。

这是布局:

<div id="wrap">
    <div class="entry"></div>
    <div class="entry"></div>
    <div class="entry"></div>
    <div class="entry"></div>
</div>

<div id="controls">
    <span class="prev">UP</div>
    <span class="next">DOWN</div>
</div>

这是jQuery:

function scrollToPosition(element) {
    if (element !== undefined) {
        $('html, body').scrollTo(element, 500, {
            margin: true
        }); 
    }
}
$(function() {
    var posts = $('.entry');
    var position = 0;
    var next = $('.next');
    var prev = $('.prev').hide();
    next.click(function(evt) {
        prev.fadeIn();
        scrollToPosition(posts[position += 1]);
        if (position === posts.length - 1) {
            next.fadeOut();
        }
    });
    prev.click(function(evt) {   
        next.fadeIn();
        scrollToPosition(posts[position -= 1]);
        if (position === 0) {
            prev.fadeOut();
        }
    });
});
$(document).keydown(function(e){
    e.preventDefault();    
    if (e.keyCode == 40) { 
       $('.next').click();
    }
    else if (e.keyCode == 38) { 
       $('.prev').click();
    }
});

除了使用按键时,一切都有效。如果我击中(下一个)5 次,一旦你触底。我必须打 (Prev) 5 次,再加上 1 次才能真正上去。我知道为什么会发生这种情况背后的逻辑,但我不知道阻止它的解决方案。我需要指示按键结束。

谢谢

--

最终代码:

    $(function() {
    var posts = $('.folio');
    var position = 0;
    var next = $('.next');
    var prev = $('.prev').hide();
    next.click(function(evt) {
        prev.fadeIn();
        scrollToPosition(posts[position += 1]);
        if (position === posts.length - 1) {
            next.fadeOut();
        }
    });
    prev.click(function(evt) {   
        next.fadeIn();
        scrollToPosition(posts[position -= 1]);
        if (position === 0) {
            prev.fadeOut();
        }
    });
    $(document).keydown(function(e) {
        if (e.which == 40 && next.is(":visible")) {
            next.click();
            return false
        } else if (e.keyCode == 38 && prev.is(":visible")) {
            prev.click();
            return false
        }
    });
});
4

1 回答 1

0

只需检查 keydown 事件中下一个/上一个的可见性:

if (e.which == 40 && next.is(":visible")) { ...
于 2012-12-16T23:25:52.517 回答