水平将div自动水平滚动到最底端，同时将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的宽度?

我希望这一切都有道理.谢谢.

解决方案

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

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

I am using this jQuery script that automatically scrolls a div horizontally based on the width of the div. But I need it to scroll to the very end of the div based on the end of the content that is inside of the div. The div has an 'overflow-y: scroll' attribute, so I'd like it to scroll through all of the content until it reaches the end.

This is the script I'm currently using:

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);

It does scroll, but it's not scrolling to the very end of the content inside of the div. Here is a jFiddle that shows what I mean: http://jsfiddle.net/rKu6Y/535/

How can I get it to auto-scroll horizontally to the END of the content rather than just the width of the div?

I hope this all makes sense. Thanks.

解决方案

You can animate the scrollLeft property, using scrollWidth and 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);

The result can be seen in this jsfiddle.

这篇关于水平将div自动水平滚动到最底端，同时将y设置为可滚动(jQuery)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！