Question

我正在尝试构建一个简单的itens列表，并通过单击next或prev箭头使它们向内滚动。我不想使用任何插件因为我认为这很简单，但我不能让他们在时间滚动3个itens或只滚动高度像素。

有人可以帮助我吗？

Fiddle Here

Answer 1

添加

.movies-list{display:block;height:620px;overflow:hidden}

并删除

div.section-movies ul { overflow: hidden; height: 2000px; }

然后添加一些jQuery

//get li height
var gh = $('.movies-list li').eq(0).height();
//prev
$('.movie-prev').on('click', function() {
    var cs = $('.movies-list').scrollTop();
    if (cs>gh) {
        cs = cs-gh;
    } else {
        cs = 0;
    }
    $('.movies-list').animate({scrollTop: cs});
});
//next
$('.movie-next').on('click', function() {
    var cs = $('.movies-list').scrollTop();
    cs = cs+gh;
    $('.movies-list').animate({scrollTop: cs});
});

与此相似的内容应该有效，您可能需要调整gh的值，具体取决于其他所有内容的设置。

在这里摆弄：http://jsfiddle.net/filever10/4Gb4x/

Answer 2

内

.window-movies {

添加：

max-height:400px;
overflow-y:scroll;

但这个简单的解决方案会打破你的页脚。我想你需要js。

编辑：

$('.movie-next').css({
            position: 'fixed',
            bottom: 0
        });

将此添加到您的js中以保持页脚位于底部。

如何使用点击在div中上下滚动列表项？

2 个答案: