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

时间:2013-06-03 04:54:28

标签: javascript jquery css

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

如何做到这一点。是否有任何javascript / jQuery插件来解决我的问题 这是我的JsFiddle

3 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:1)

See this example on jsFiddle

您只需设置.gallery scrollLeft

即可
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();

To start over see this other version

答案 2 :(得分:1)

您好,您可以制作像这样的代码

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

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

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