jquery - 使用导航键 jquery 跳转滚动 ul of div

Question

您好，我有一个 UL 文章(见下文)它们是水平堆叠的，我希望能够使用向上/向下键滚动浏览它们，以便下一个变得居中(像这样的东西:http://www.thebullittagency.com .我看过 scrollpane 但我不确定如何知道要滚动到它的下一个 div 的位置。

到目前为止，我已经让事件处理程序正常工作并且我的文章已订购。

<div id="articles">
<ul>
<li>  
<article>
<a href="elements.php"><h1>Beta Site Work Begun</h1></a>

<img src="img/cross.png" name="crossbutt" width="50" height="40" id="crossbutt" />
<p id="pup">I thought I'd join in with the BBC and start work on my own beta site .      It's early days but I'm starting to get a feel for the design and which new tech I'm going   to use. The background for this first incarnation was made using Justin Windle's awesome   Super Recursion Toy and edited in PS.</p>
<h3>HTML, PHP, CSS</h3>
</article>
</li>
<li>
<article>
<a href="elements.php">
<h1>Test to test to test</h1></a>
<img src="img/cross.png" width="50" height="40" id="crossbutt" />
<p id="pup">Test the test to test the test compare .</p>
<h3>HTML, PHP, CSS</h3>
</article>
</li>
</ul>
</div>

Answer 1

您可以将 position: absolute 用于您的主 div 并根据按键控制该位置，如下所示:( Live Demo )

---

CSS

#articles {
    position: absolute;
}

/* Optional: Hide scrollbar */
body {
    overflow: hidden;
}

js

var current = current = $('#articles ul li').first();

$(window).keydown(function(e) {
    if (e.which === 40) { // down
        current = current.next().length === 0 ? current : current.next();
    } else if (e.which === 38) { // up
        current = current.prev().length === 0 ? current : current.prev();
    } else {
        return;
    }
    if (!current || current.length === 0) {
        current = $('#articles ul li').first();
    }
    console.log(current.position());
    $('#articles').animate({
        top: '-' + current.position()['top'] + 'px'
    }, 150);
});