分屏布局中左侧溢出文本自动转至右侧的无缝打字机动画实现方案

嘿，我仔细看了你的打字机动画需求和现有代码，问题出在当前逻辑是打完一整段文本后才检查左侧容器是否溢出，这时候文本已经超出可视区域了。咱们需要调整成在打字过程中实时监测剩余空间，一旦左侧快满了就自动切换到右侧继续输出，同时保持动画的连贯性。

核心解决思路 #

• 实时监测左侧容器的剩余可容纳高度，而非事后检查
• 每输出一个字符就判断是否即将溢出，提前切换到右侧容器
• 统一左右容器的内边距，保证文本起始位置对齐
• 保留段落换行的逻辑，让左右两侧的排版风格一致

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TOP SECRET</title>
    
    <!-- External Styles -->
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="about.css">

    <!-- Fonts & Internal Styles -->
    <style>
        @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

        body {
            font-family: 'VT323', monospace;
            background-color: #000;
            color: #ff9500;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            font-size: 2rem;
            display: flex;
            flex-direction: row;
            height: 100vh;
        }
        .left, .right {
            width: 50%;
            padding: 2rem;
            box-sizing: border-box;
            overflow-y: hidden; /* 禁止垂直滚动 */
            height: 100%; /* 明确容器高度，方便计算溢出 */
        }

        .left {
            text-align: left;
        }

        .right {
            /* 去掉额外的padding-top，和左侧保持一致对齐 */
        }

        .section {
            display: none;
            padding: 4rem 2rem;
            margin-top: 5rem;
        }

        .section.active {
            display: block;
        }

        h1 {
            font-size: 2.5rem;
            text-transform: uppercase;
            margin-bottom: 1rem;
        }

        input[type="text"] {
            width: 80%;
            padding: 0.8rem;
            font-size: 1.2rem;
            border: 2px solid #ff9500;
            background-color: #111;
            color: #ff9500;
            border-radius: 5px;
            outline: none;
            margin-bottom: 1rem;
            text-align: center;
        }

        input[type="text"]::placeholder {
            color: rgba(255, 140, 0, 0.6);
        }

    </style>
</head>
<body>

    <div class="left">
        <div id="intro" class="section active">
            <p id="introText" class="intro"></p>
        </div>

        <div id="debrief" class="section">
            <h1>INFO</h1>
            <div class="text"><span id="text"></span></div>
        </div>

    <div class="right">
        <div id="rightText"></div>
    </div>

    <script>
        document.getElementById("debrief").classList.add("active");

        function startQuoteAnimation() {
            const textElement = document.getElementById("text");
            const rightTextElement = document.getElementById("rightText");
            const leftContainer = document.querySelector('.left');
            const textArray = [
                "We are a Classified Agency funded by the U.S. government...",
                "Our sector [Sector 6] is tasked with intercepting all interstellar transmissions...",
                "If the public knew about this, chaos would ensue...",
                "It is your mission to work with us with your time here and to make sure NO ONE knows...",
                "INFO",
                "Task 1",
                "Task 2",
                "Task 3",
                "Task 4"
            ];

            let textIndex = 0, charIndex = 0;
            let isLeft = true;

            function checkLeftOverflow() {
                // 检查左侧容器内容高度是否超过容器可视高度
                return leftContainer.scrollHeight > leftContainer.clientHeight;
            }

            function typeText() {
                if (textIndex < textArray.length) {
                    if (charIndex < textArray[textIndex].length) {
                        // 先检查左侧是否已经溢出，如果溢出则切换到右侧
                        if (isLeft && checkLeftOverflow()) {
                            isLeft = false;
                        }

                        if (isLeft) {
                            textElement.innerHTML += textArray[textIndex].charAt(charIndex);
                        } else {
                            rightTextElement.innerHTML += textArray[textIndex].charAt(charIndex);
                        }
                        charIndex++;
                        setTimeout(typeText, 25);
                    } else {
                        // 段落结束后添加换行
                        if (isLeft) {
                            textElement.innerHTML += "<br><br>";
                            // 换行后再次检查是否溢出，提前切换
                            if (checkLeftOverflow()) {
                                isLeft = false;
                            }
                        } else {
                            rightTextElement.innerHTML += "<br><br>";
                        }
                        textIndex++;
                        charIndex = 0;
                        setTimeout(typeText, 1000);
                    }
                }
            }
            typeText();
        }

        // 启动动画
        startQuoteAnimation();
    </script>
</body>
</html>

关键改动说明 #

1. 容器高度明确：给.left和.right加上height:100%，确保计算溢出时的基准高度准确
2. 实时溢出检查：新增checkLeftOverflow函数，每次输出字符前都检查左侧是否溢出，及时切换到右侧
3. 对齐修正：移除右侧容器额外的padding-top，让左右文本起始位置保持一致
4. 换行后二次检查：段落换行后再次检查溢出，避免换行后直接超出容器

修改后，当左侧容器的文本快要填满时，打字机会自动无缝切换到右侧继续输出，所有文本都能保持在可视区域内，完全符合你的需求。

备注：内容来源于stack exchange，提问作者Agent.James