ネイティブ js を使用してライブ バレット スクリーンのスクロール効果をシミュレートします。

<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="送信したい弾幕を入力してください" id="input_text_id">
            <button type="button" class="button_btn" id="send_btn">送信</button>
    </div>
</div>

let inputText = document.getElementById("input_text_id");//入力ボックスlet scrollContent = document.getElementById("scroll_ul_id");//サイドチャットバーlet videoView = document.getElementById("video_view");//ビデオエリアlet videoWidth = videoView.offsetWidth;//ライブ放送エリアの合計幅let listHeight = videoView.offsetHeight/10;//ライブ放送エリアの各レイヤーの高さlet listTopNum = [0,1,2,3,4,5,6,7,8,9];//ライブ放送エリアの高さを10のレイヤーに分割document.getElementById("send_btn").addEventListener("click",function(){//送信ボタンをリッスンlet value = inputText.value;//入力ボックスの値を取得if(!value) return;
    appendDom(value); //入力ボックスの値をスクロールチャットに挿入します createVideoBulletChatDom(value); //入力ボックスの値を箇条書き画面に挿入します inputText.value = ''; //入力ボックスをクリアします scrollContent.scrollTop = scrollContent.scrollHeight; //自動的に一番下までスクロールします })
function appendDom(value){//入力ボックスの値をスクロールチャットに挿入します。let li = document.createElement("li");
    li.setAttribute("class","scroll_li");
    li.innerHTML = 値;
    scrollContent.appendChild(li);
}
speedArr = ['normal','fast','faster'] とします。
function createVideoBulletChatDom(value){//入力ボックスの値を箇条書き画面に挿入します。let num = listTopNum[Math.floor((Math.random()*listTopNum.length))];
    p = document.createElement("p"); とします。
    p.setAttribute("class","video_p");
    p.style.top = (num * 60) + "px";
    p.style.left = ビデオ幅 + "px";
    p.innerHTML = 値;
    ビデオビューに子要素を追加します。
    speed = speedArr[Math.floor((Math.random()*speedArr.length))] とします。
    Animate(p,speed); //スクロールアニメーション}
animateType = {
    '通常':5,
    '速い':10,
    'より速い':15
}
function Animate(dom,speed){//スクロールアニメーション let domWidth = dom.offsetWidth;//現在の弾丸画面要素の幅 let distance = videoWidth;//ライブ放送領域の合計幅 speed ? speed : 'normal';
    間隔をanimateType[速度]とします
    タイマー = setInterval(function(){
            距離 -= 間隔;
            dom.style.left = 距離 + 'px';
            if(距離 <= -domWidth){
                タイマーの間隔をクリアします。
                videoView.removeChild(dom); //画面からスクロールアウトしたラベルをクリアします}
    },50)
}