-1

我正在尝试构建一个简单的项目列表,并通过单击下一个或上一个箭头使它们在内部滚动。我不想使用任何插件,因为我认为这很简单,但我无法让它们一次滚动 3 个项目或仅滚动高度像素。

有人可以帮助我吗?

在这里提琴

4

2 回答 2

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/

于 2013-11-12T16:12:20.937 回答
0

里面

.window-movies { 

添加:

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

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

编辑:

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

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

于 2013-11-12T16:02:04.453 回答