angular html 文字向上无缝滚动

样式要重新自己写

body{font-size:12px}

        #demo{overflow:hidden; height:80px; width:280px; margin:90px auto; position:relative;}

        #demo1{height:auto; text-align:left;}

        #demo2{height:auto; text-align:left;}

        #demo1 li, #demo2 li{list-style-type:none; height:22px; text-align:left; }

在html里写这个需要滚动的内容  重新样式的时候行内样式style里的样式width和height ,可以不要,然后在css里在根据ui图设置宽高

<div id="demo" style="overflow:hidden;height:132px;width:400px;border:1px solid #dde5bc;margin-left:300px; margin-top:100px;" v-for="(item, index) in items" :key="index">

      <div id="demo1">

        <a href="#">111111111111111111111</a>

        <a href="#">22222222222222222222</a>

        <a href="#">33333333333333333333</a>

        <a href="#">44444444444444444444</a>

        <a href="#">111111111111111111111</a>

        <a href="#">22222222222222222222</a>

        <a href="#">111111111111111111111</a>

        <a href="#">22222222222222222222</a>

        <a href="#">111111111111111111111</a>

        <a href="#">---------------------</a>

      </div>

      <div id="demo2"></div>

    </div>

<script>

在ts里写这个js样式

const speed = 40;

    const demo = document.getElementById('demo');

    const demo2 = document.getElementById('demo2');

    const demo1 = document.getElementById('demo1');

    demo2.innerHTML = demo1.innerHTML;

    function Marquee() {

      console.log(111);

      if (demo.scrollTop >= demo1.offsetHeight) {

        // demo.scrollTop -= demo1.offsetHeight;

        demo.scrollTop = 0;

      } else {

        // demo.scrollTop++;

        demo.scrollTop = demo.scrollTop + 1;

      }

    }

    let MyMar = setInterval(Marquee, speed);

    demo.onmouseover = function () {

      clearInterval(MyMar);

    };

    demo.onmouseout = function () {

      MyMar = setInterval(Marquee, speed);

    };

</script>