如何保持多个字幕同步？

Question

我有一个带有多个滚动字幕的网页。由于字符串的长度可能会有所不同，因此字幕会迅速开始滚动，彼此之间不同步。

我已经在网上搜索了 CSS和JavaScript 代码以尝试找到解决问题的方法，但是我只能找到更改方向，滚动速度等的代码。

CSS：

            #responding {
            white-space:nowrap;
            max-width:200px;
            max-height: 80px;
            overflow:hidden;
            font-size: 30pt;
            marquee-speed: fast;
            text-align: center;
            vertical-align: middle;

JS：

function isElementOverflowing(element) {
    var overflowX = element.offsetWidth < element.scrollWidth,
        overflowY = element.offsetHeight < element.scrollHeight;

    return (overflowX || overflowY);
}

function wrapContentsInMarquee(element) {
    var marquee = document.createElement("marquee"),
    contents = element.innerText;

    marquee.innerText = contents;
    marquee.scrollAmount = 12;
    element.innerHTML = "";
    element.appendChild(marquee);
}

var element = document.getElementById("incDetails");

if (isElementOverflowing(element)) {
    wrapContentsInMarquee(element);
}