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

Auto-Scroll div horizontally to the very end with overflow-y set to scroll (jQuery)

我正在使用这个 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/

我怎样才能让它水平自动滚动到内容的末尾,而不仅仅是 div 的宽度?

我希望这一切都有意义。谢谢

您可以使用 scrollWidthclientWidthscrollLeft 属性 设置动画:

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.