js 横向自动滚动

<div ref="scrollDiv" class="prime-tip">
    <div id="scroll_begin" class="item-wrap">
        <span v-for="item in promotionInfoVo?.promotionConfigList" :key="item.id" class="prime-tip-item">
            Prchase {{ item.achieveQuantity }} get {{ item.giveQuantity }}.
        </span>
    </div>
    <div id="scroll_end"></div>
</div>

.prime-tip {
    display: flex;
    align-items: center;
    color: $auxiliaryColor;
    padding: 0 24px;
    background: rgba(0, 0, 0, 0.4);
    overflow: hidden;
    white-space: nowrap;

    &-item {
        white-space: nowrap;
        margin-right: 16px;
    }
}

// 横向滚动
function ScrollImgLeft() {
    // 计算右侧需要滚动区域宽度并设置
    scrollDiv.value.style.width = 580 - primeIcon.value.offsetWidth + 'px'
    let speed = 50 //滚动速度
    let MyMar = null
    let scroll_begin = document.getElementById('scroll_begin')
    let scroll_end = document.getElementById('scroll_end')
    scroll_end.innerHTML = scroll_begin.innerHTML

    function Marquee() {
        if (scroll_end.offsetWidth - scrollDiv.value.scrollLeft <= 0) {
            scrollDiv.value.scrollLeft -= scroll_begin.offsetWidth
        } else {
            scrollDiv.value.scrollLeft += 2
        }
    }
    if (scrollDiv.value.offsetWidth < scroll_begin.offsetWidth) {
        MyMar = setInterval(Marquee, speed)
    }
    scrollDiv.value.onmouseover = function () {
        clearInterval(MyMar)
    }
    scrollDiv.value.onmouseout = function () {
        MyMar = setInterval(Marquee, speed)
    }
}