Javascript 如何使文本向上滚动？

互联网上最常见的答案是使用字幕，但有人告诉我，它已经过时，存在问题。但我还是用了它，但现在我无法让它工作，这就引出了一个问题：如何让文本以一种可靠的方式向上滚动，从而正常工作？我现在的代码有时有效，有时无效。向上滚动到可见性也需要很长时间

我的另一个要求是，如果文本行只有一行，那么不要滚动。我怎样才能做到这一点

这就是我到目前为止所做的：

<div class="message_div" style="height:1em; left: 136px; bottom:0px; overflow: hidden; position: absolute; background: white; box-sizing: border-box;">
  <span class="message">{% for message in product|product_message:request.user %} {{message.message|safe}} {% endfor %}</span>
</div>

<script>
function message_function()
{
    var th = $(this);
    var ih = $(this).outerHeight(); // outer height
    var oh = $(this).find('.message').outerHeight(); // inner height
    var txt = $(this).find('.message').html(); // so that the inline styles remains the same
    if (oh > ih)
    {
        th.html('');
        th.html('<marquee class="message" direction="up" scrollamount="1" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()">' + txt + '</marquee>')
    }
}

($('.message_div').each(message_function));

</script>

在这里：

我对它进行了调整，使它只使用了一个段落

JS

HTML

---

但我还是跟着它走了…………像这样吗@baao程序员的悲惨生活：一点也不，如果你做了这样的事情，你就不是程序员了。。。你要求我们让字幕标签为你工作，即使你被告知你不应该使用它，因为它不再工作了？

(function($){

    $.fn.rollup = function ( options ) {

        var settings = $.extend( {
            $wrapper : this,
            $content : $('.scrolling-div-content'),
            speed : 5000
        }, options);

        return this.each( function(){

            var $content = settings.$content,
                $content_height = $content.height(),
                $wrapper = settings.$wrapper,
                $wrapper_height = $wrapper.height(),
                $clone = $content.clone(),
                $merge = $.merge( $content, $clone );

            $wrapper.append( $clone );

            function rollUp () {
                $merge.animate({
                    top : -( $content_height ),
                }, settings.speed, 'linear', function () {
                    $merge.css({
                        top : 0
                    });
                    rollUp();
                });
        }

        rollUp();

        });
    };
})(jQuery)

$('.scrolling-div').rollup({speed:2000});

  <div class="scrolling-div">
  <div class="scrolling-div-content">
    <p>
      1<br>
      1<br>
      1<br>
      1<br>
      1<br>
      1<br>
      1<br>
    </p>
    </div>
<div>

.scrolling-div{
  height:100px;
  overflow:hidden;
  position:relative;
  border:1px solid #333;
}
.scrolling-div-content{
  position:relative;
}