Question

我正在尝试实现自定义内容滚动条。基本上，我们的想法是，在单击按钮时，容器的内容将水平滚动到容器中具有page类的元素。每次单击都会更改具有类page的元素，因此总会有一个要滚动到的新元素。

$('.next').on('click', function() {
    $('#container').animate({
        scrollLeft: $(this).find('.page').position().left
    }, 1000);
});

这在第一次点击时工作正常，但第二次点击不起作用。后续点击确实有效，但不是每次都有效。

我认为因为它试图滚动到特定值，所以它可能没有得到正确的值。

是否可以平滑滚动到给定元素而不是它的位置值？

Answer 1

它总是会滚动到第一个.page元素。

尝试：

var i = 0;
$('.next').on('click', function() {
    $('#container').animate({
        scrollLeft: $(this).find('.page').eq(i).position().left
    }, 1000);
    i++;
});

基本上每次点击i变量都会增加，我们每次点击都会搜索i'th .page。

Answer 2

我最终得到了这样的工作：

$('.next').on('click', function() {
    $('#container').animate({
        scrollLeft: $(this).scrollLeft() + $(this).find('.page').position().left
    }, 1000);
});

scrollLeft在一个可以隐藏溢出的可滚动div中

2 个答案: