水平将div自动水平滚动到最底端，同时将y设置为可滚动（jQuery）

Question

我正在使用此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的宽度？

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

Answer 1

您可以scrollLeft使用scrollWidth和设置属性的动画clientWidth：

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中看到。