Автоматическая прокрутка div по горизонтали до самого конца с параметром overflow-y для прокрутки (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?

Я надеюсь, что все это имеет смысл. Спасибо.


javascript scroll jquery css autoscroll
person anthonyCam    schedule 05.09.2016    source источник
comment
так вы хотите, чтобы последнее слово END тоже скрывалось слева, когда прокрутка заканчивается вправо?   -  person Enmanuel Duran    schedule 06.09.2016
comment
@EnmanuelDuran Нет, только для того, чтобы показать слово КОНЕЦ. Дальше этого идти не нужно. Спасибо!   -  person anthonyCam    schedule 06.09.2016

Ответы (1)


arrow_upward
7
arrow_downward

Вы можете анимировать свойство 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.

person ConnorsFan    schedule 06.09.2016