Как перезапустить марку прокрутки, когда последняя текстовая строка в тексте контейнера достигает целевого поля? - PullRequest
Новая
       57

Как перезапустить марку прокрутки, когда последняя текстовая строка в тексте контейнера достигает целевого поля?

0 голосов
/ 13 декабря 2018

Я пытаюсь перезапускать маркер прокрутки каждый раз, когда последняя строка текста в пре достигает целевого поля наверх?Это может быть 1 строка, 50 строк или 100 строк.

Я посмотрел несколько примеров здесь и получил прокрутку от начальной цели до конечной цели и перезапускается при достижении до конца работы, но перезапускает половину анимацииКстати, мне нужен последний текст внутри «pre», чтобы добраться до цели вверху, а затем снова запустить анимацию снизу.Я надеюсь, что это имеет смысл и извините за плохую грамматику.

Вот HTML: 

<code><pre id="text">
text 1<br>
text 2<br>
text 3<br>
text 4<br>
text 5<br>
text 6<br>
text 7<br>
text 8<br>
text 9<br>
text 10<br>

CSS: 

pre#text{display:block;overflow:hidden;}

jQuery: 

function animatethis(targetElement, speed) {
$(targetElement).animate({ marginTop: "-50px"},
{
    duration: speed,
    complete: function ()
    {
        $(targetElement).css('marginTop','590px');
        animatethis(targetElement, speed);
    }
});
};
animatethis($('pre#text'), 5000);

Вот ссылка на JSFiddle: https://jsfiddle.net/1kfpbcyo/

Заранее спасибо.

1 Ответ

0 голосов
/ 13 декабря 2018

Проблема в том, что вы определяете вручную -50px, тогда как это должна быть полная высота div: 

function animatethis(targetElement, speed) {
    var height = $( "#text" ).height();
    $(targetElement).animate({ marginTop: -height},
    {
        duration: speed,
        complete: function ()
        {
            $(targetElement).css('marginTop','590px');
            animatethis(targetElement, speed);
        }
    });
};

animatethis($('pre#text'), 5000);
pre#text{display:block;overflow:hidden;}


text 1

text 2

text 3

text 4

text 5

text 6

text 7

text 8

text 9

text 10
...