javascript - 如何在 div 标签内自动移动滚动条

Question

我有一个包含大量数据的 div。我已经使用overflow属性来隐藏额外的数据，现在我希望我的滚动条自动向左移动到第一行的第 4、5、6 个元素和第 2 行的第 4、5、6 个元素的位置可见的。然后几秒钟后，我希望滚动条向左移动更多，以便第一行的第 7、8、9 个和第二行的第 7、8、9 个元素可见

怎么做。是否有任何 javascript/jQuery 插件可以解决我的问题。
这是我的JsFiddle

Answer 1

我认为 ' scroll="auto"' 应该可以解决问题。
但是您需要将它放在弹出窗口的 BODY 标记中。

Answer 2

请参阅 jsFiddle 上的此示例

你只需要设置.galleryscrollLeft

var autoscrollTimer;

function cancelscrolling()
{
    clearTimeout(autoscrollTimer);
}

function autoscroll()
{
    var gal = $(".gallery");

    // don't cancel if it is the code scrolling
    gal.off("scroll");

    gal.animate({ scrollLeft: "+=" + gal.width() },
                function() {
                    setTimeout(function(){
                        // when the animation ends re-add the code
                        // to stop scrolling if the user scrolls
                        gal.on("scroll", cancelscrolling);
                    }, 1);
                });

    // if still not in the end, continue scrolling
    if (gal.get(0).scrollWidth > (gal.get(0).scrollLeft + gal.width()))
        autoscrollTimer = setTimeout(autoscroll, 3000);
}

$(".gallery").on("scroll", cancelscrolling);

// starts the loop
autoscroll();

要重新开始，请查看其他版本

Answer 3

嗨，你可以制作这样的代码

$(document).ready(function(){
    lastElementLeft = $('.demo').position().left ;
    scrollAmount = lastElementLeft + 200 ;
    //alert(scrollAmount);

$('.demo').animate({scrollLeft: scrollAmount},1000);
});

演示在这里http://jsfiddle.net/uaewc/307/