自动滚动div水平到最后,overflow-y设置为scroll(jQuery)

时间:2016-09-05 21:00:38

标签: javascript jquery css scroll autoscroll

我正在使用这个jQuery脚本,根据div的宽度自动水平滚动div 。但我需要它根据div内部的结束内容滚动到div的最后。 div有一个'overflow-y:scroll'属性,所以我希望滚动遍历所有内容,直到它结束。

这是我目前正在使用的脚本:

function animatethis(targetElement, speed) {
    var width = $(targetElement).width();
    $(targetElement).animate({ marginLeft: "-="+width},
    {
        duration: speed,
        complete: function ()
        {
            targetElement.animate({ marginLeft: "+="+width },
            {
                duration: speed,
                complete: function ()
                {
                    animatethis(targetElement, speed);
                }
            });
        }
    });
};
animatethis($('#q1'), 5000);

它会滚动,但它不会滚动到div内容的最末端。这是一个显示我的意思的jFiddle: http://jsfiddle.net/rKu6Y/535/

如何让它自动滚动到内容的END而不仅仅是div的宽度?

我希望这一切都有道理。感谢。

1 个答案:

答案 0 :(得分:4)

您可以使用scrollLeftscrollWidthclientWidth媒体资源制作动画:

function animatethis(targetElement, speed) {
    var scrollWidth = $(targetElement).get(0).scrollWidth;
    var clientWidth = $(targetElement).get(0).clientWidth;
    $(targetElement).animate({ scrollLeft: scrollWidth - clientWidth },
    {
        duration: speed,
        complete: function () {
            targetElement.animate({ scrollLeft: 0 },
            {
                duration: speed,
                complete: function () {
                    animatethis(targetElement, speed);
                }
            });
        }
    });
};
animatethis($('#q1'), 5000);

结果可以在jsfiddle中找到。