javascript - 当容器文本中的最后一个文本行达到目标边距时，如何重新启动滚动标记？

Question

每当 pre 中的最后一行文本到达顶部的目标边距时，我是否试图重新启动滚动标记？它可以是 1 行、50 行或 100 行。

我在这里查看了几个示例，并获得了从开始目标到结束目标的滚动，并在到达结束时重新启动，但它会在中途重新启动动画，我需要“pre”中的最后一个文本才能到达顶部的目标，然后从底部再次重新启动动画。我希望这是有道理的，对语法不好感到抱歉。

这是 HTML:

<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>
</pre>

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/

Answer 1

问题是您手动定义了 -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;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<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>
</pre>