jQuery 指定区域的内容循环滚动

需求：页面指定区域内的内容循环滚动，但是内容形式、高度都不固定，是接口从编辑器提取出来的内容。

代码：

<div id="container5">
    <div class="content" id="f12red1">
            自2023年9月20日24时起，国内汽、<br>柴油价格（标准品，下同）每吨分别提高70元。<br>
            自2023年9月21日凌晨起，<br>全国加油站统一上调零售价格，<br>调价金额为：汽柴油、分别提高385元和370元，<br>从全国平均来看。<br>
            92#汽油 上调 0.30元/升<br>
            95号汽油 上调 0.32元/升<br>
            0#柴油 上调 0.31元/升<br>
            按照此上调幅度计算，<br>加满一箱容量在50L的92号汽油，<br>车主可以要多花15元左右。<br>
            国家通知：<br>根据近期国际市场油价变化情况，<br>按照现行成品油价格形成机制，<br>自2023年9月20日24时起，<br>国内汽、柴油价格（标准品，下同）每吨分别提高385元、370元。<br>调整后，<br>各省（区、市a）和中心城市汽、柴油最高零售价格见附表。<br>相关价格联动及补贴政策按现行规定执行。<br>
            中石油、中石化、中海油三大公司要组织好成品油生产和调运，<br>确保市场稳定供应，严格执行国家价格政策。<br>各地相关部门要加大市场监督检查力度，<br>严厉查处不执行国家价格政策的行为，<br>维护正常市场秩序。<br>消费者可通过12315平台举报价格违法行为。<br>
            <img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0921%2F0a2dd1c2j00s1b9y400e4d200u0016gg00it00ql.jpg&thumbnail=660x2147483647&quality=80&type=jpg">
    </div>
</div>

css：

#container5{
            border: 1px yellow solid;
            width: 1000px;
            height: 800px;
            font-size: 32px;
            line-height:50px;
            overflow: hidden;
            padding:20px;
}

js：

$(document).ready(function() {
  // 获取页面高度
  var pageHeight = $("#f12red1").height();
  
  // 设置滚动的初始位置
  var scrollPosition = 0;
  
  // 设置滚动的速度
  var scrollSpeed = 1; // 每50毫秒滚动一次
  
  // 定义滚动函数
  function autoScroll() {
    // 计算下一次滚动的位置
    scrollPosition += 1;
    
    // 如果滚动到页面底部，将滚动位置重置为0，重新开始滚动
    if (scrollPosition >= pageHeight) {
      scrollPosition = 0;
    }
    
    // 使用animate函数实现滚动效果
    // $("#container5").animate({scrollTop: scrollPosition}, scrollSpeed );
    $("#container5").animate({ scrollTop: scrollPosition }, scrollSpeed, 'linear', function() {
        if (scrollPosition === 0) {
            autoScroll(); 
        }
    });
  }
  
  // 设置定时器，每50毫秒触发一次滚动函数
  setInterval(autoScroll, scrollSpeed);
});