Use native js to simulate the scrolling effect of live bullet screen

<div class="move_video_content">
    <div class="video_content">
        <div class="video_div" id="video_view"></div>
        <div class="scroll_content">
            <ul class="scroll_ul" id="scroll_ul_id"></ul> 
        </div>
    </div>
    <div class="input_content">
            <input type="text" class="input_text" maxlength="30" placeholder="Please enter the barrage you want to send" id="input_text_id">
            <button type="button" class="button_btn" id="send_btn">Send</button>
    </div>
</div>

let inputText = document.getElementById("input_text_id");//input input boxlet scrollContent = document.getElementById("scroll_ul_id");//Side chat barlet videoView = document.getElementById("video_view");//Video arealet videoWidth = videoView.offsetWidth;//Total width of the live broadcast arealet listHeight = videoView.offsetHeight/10;//Height of each layer of live broadcast arealet listTopNum = [0,1,2,3,4,5,6,7,8,9];//Divide the height of the live broadcast area into 10 layersdocument.getElementById("send_btn").addEventListener("click",function(){//Listen for the send buttonlet value = inputText.value;//Get the value of the input boxif(!value) return;
    appendDom(value); //Insert the value of the input box into the scroll chat createVideoBulletChatDom(value); //Insert the value of the input box into the bullet screen inputText.value = ''; //Clear the input box scrollContent.scrollTop = scrollContent.scrollHeight; //Automatically scroll to the bottom })
function appendDom(value){//Insert the value of the input box into the scroll chat let li = document.createElement("li");
    li.setAttribute("class","scroll_li");
    li.innerHTML = value;
    scrollContent.appendChild(li);
}
let speedArr = ['normal','fast','faster'];
function createVideoBulletChatDom(value){//Insert the value of the input box into the bullet screen let num = listTopNum[Math.floor((Math.random()*listTopNum.length))];
    let p = document.createElement("p");
    p.setAttribute("class","video_p");
    p.style.top = (num * 60) + "px";
    p.style.left = videoWidth + "px";
    p.innerHTML = value;
    videoView.appendChild(p);
    let speed = speedArr[Math.floor((Math.random()*speedArr.length))];
    Animate(p,speed); //Scrolling animation}
let animateType = {
    'normal':5,
    'fast':10,
    'faster':15
}
function Animate(dom,speed){//Scrolling animation let domWidth = dom.offsetWidth;//The width of the current bullet screen element let distance = videoWidth;//The total width of the live broadcast area speed ? speed : 'normal';
    let interval = animateType[speed]
    let timer = setInterval(function(){
            distance -= interval;
            dom.style.left = distance + 'px';
            if(distance <= -domWidth){
                clearInterval(timer);
                videoView.removeChild(dom); //Clear the label that has scrolled out of the screen}
    },50)
}