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回ダウン（次）を打てば底に着いたら。実際に上がるには、（前の）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 に答える