Verwenden Sie natives JS, um den Scroll-Effekt des Live-Bullet-Bildschirms zu simulieren

<div Klasse="Videoinhalt verschieben">
    <div Klasse="Videoinhalt">
        <div Klasse="video_div" id="video_view"></div>
        <div Klasse="Scrollinhalt">
            <ul Klasse="scroll_ul" id="scroll_ul_id"></ul> 
        </div>
    </div>
    <div Klasse="Eingabeinhalt">
            <input type="text" class="input_text" maxlength="30" placeholder="Bitte geben Sie das Sperrfeuer ein, das Sie senden möchten" id="input_text_id">
            <button type="button" class="button_btn" id="send_btn">Senden</button>
    </div>
</div>

let inputText = document.getElementById("input_text_id");//Eingabeeingabefeldlet scrollContent = document.getElementById("scroll_ul_id");//Nebenchatleistelet videoView = document.getElementById("video_view");//Videobereichlet videoWidth = videoView.offsetWidth;//Gesamtbreite des Liveübertragungsbereichslet listHeight = videoView.offsetHeight/10;//Höhe jeder Ebene des Liveübertragungsbereichslet listTopNum = [0,1,2,3,4,5,6,7,8,9];//Die Höhe des Liveübertragungsbereichs in 10 Ebenen aufteilendocument.getElementById("send_btn").addEventListener("click",function(){//Auf die Schaltfläche „Senden“ wartenlet value = inputText.value;//Wert des Eingabefelds abrufenif(!value) return;
    appendDom(value); //Den Wert des Eingabefelds in den Scroll-Chat einfügen createVideoBulletChatDom(value); //Den Wert des Eingabefelds in den Bullet-Bildschirm einfügen inputText.value = ''; //Eingabefeld löschen scrollContent.scrollTop = scrollContent.scrollHeight; //Automatisch nach unten scrollen })
function appendDom(value){//Füge den Wert des Eingabefelds in den Scroll-Chat ein let li = document.createElement("li");
    li.setAttribute("Klasse","scroll_li");
    li.innerHTML = Wert;
    scrollContent.appendChild(li);
}
let speedArr = ['normal','schnell','schneller'];
Funktion createVideoBulletChatDom(Wert){//Fügen Sie den Wert des Eingabefelds in den Bullet-Bildschirm ein let num = listTopNum[Math.floor((Math.random()*listTopNum.length))];
    let p = document.createElement("p");
    p.setAttribute("Klasse","video_p");
    p.style.top = (Zahl * 60) + "px";
    p.style.left = Videobreite + "px";
    p.innerHTML = Wert;
    videoView.appendChild(p);
    lass Geschwindigkeit = GeschwindigkeitArr[Math.floor((Math.random()*GeschwindigkeitArr.Länge))];
    Animate(p,speed); //Scrolling-Animation}
lass animateType = {
    'normal':5,
    'schnell':10,
    'schneller':15
}
Funktion Animate(dom,speed){//Scrolling-Animation let domWidth = dom.offsetWidth;//Die Breite des aktuellen Bullet-Bildschirmelements let distance = videoWidth;//Die Gesamtbreite des Live-Übertragungsbereichs Geschwindigkeit? Geschwindigkeit: „normal“;
    let Intervall = Animationstyp[Geschwindigkeit]
    let timer = setzeIntervall(Funktion(){
            Entfernung -= Intervall;
            dom.style.left = Abstand + "px";
            wenn(Abstand <= -domWidth){
                Intervall löschen(Timer);
                videoView.removeChild(dom); //Lösche das Label, das aus dem Bildschirm gescrollt ist}
    },50)
}