Question

我正在使用scrolTo插件创建一个长垂直页面，您可以通过点击或按键滚动到每个新帖子。

这是布局：

<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
        }
    });
});

Answer 1

只需检查keydown事件中next / previous的可见性：

if (e.which == 40 && next.is(":visible")) { ...

在滚动结束时停止Keypress事件

1 个答案: