如何实现鼠标在页面左侧时仍能滚动右侧内容？

我搭建了一个HTML/CSS左右分栏布局，左侧区域固定且不可滚动，右侧为可滚动区域。目前遇到的问题是，当鼠标停留在左侧区域时，无法滚动右侧页面内容。请问如何实现鼠标处于左侧区域时仍能滚动右侧内容？是否需要借助JavaScript而非仅用CSS来实现？

原代码 #

CSS #

.container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: left;
    font-family: Georgia, serif;
}

.leftSide {
    background-color: #F7F1E5;
    width: 45vw;
    height: 100%;
    position: fixed !important;
    left: 0 !important;
    z-index: 1 !important;
    padding: 2rem 1.5rem 2.5rem;
}

.rightSide {
    width: 50vw;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    margin-left: 50%;
}

.section {
    position: sticky;
    top: 0;
    display: inline-block;
    width: 100%;
}

.section>* {
    padding: 0 2rem 0 5rem;
}

.rightSideFirstSection {
    background-color: #E7B10A;
}

.rightSideSecondSection {
    background-color: #898121;
}

.rightSideThirdSection {
    background-color: #4C4B16;
}

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
</head>
<body>
    <div class="container">
        <header class="leftSide">
            <h2 class="leftSideMessage">
                鼠标在这里滚动时，右侧内容不会跟着滚动
            </h2>
            <p>如何实现鼠标在左侧区域时，仍能滚动右侧内容？</p>
        </header>
        <main class="rightSide">
            <article>
                <section class="section rightSideFirstSection">
                    <h2>只有鼠标在这边时，滚动才生效</h2>
                    <p>
                        从前，在一个遥远的国度里，住着一只调皮的猴子麦克斯。麦克斯最喜欢的事情就是在树间荡来荡去，偷香蕉，走到哪里就把混乱带到哪里。有一天，在他例行的香蕉突袭中，麦克斯偶然发现了一棵闪烁着彩虹所有颜色的魔法树。好奇心战胜了他，麦克斯爬上树，发现了一堆连威利·旺卡都会嫉妒的秘密糖果 stash。麦克斯对自己的发现欣喜若狂，他把口袋塞满糖果，荡去和其他猴子分享他的宝藏。猴子们对这份意外的礼物欣喜若狂，在糖份驱动的狂欢中跳来跳去。从那天起，麦克斯被称为丛林的糖果之王，这片土地上的每一只猴子都跟着他，希望能再尝到他的魔法糖果。
                    </p>
                </section>
                <section class="section rightSideSecondSection">
                    <p>
                        太阳开始下山时，麦克斯和他的猴子朋友们决定举办一个派对来庆祝他们新发现的宝藏。他们生起篝火，挂上彩灯，播放他们最喜欢的音乐。麦克斯甚至展示了他最好的舞蹈动作，在藤蔓间荡来荡去，在空中翻跟头。其他猴子为他欢呼，很快每个人都加入了舞会。他们在闪烁的星星和月光下笑啊跳啊，直到深夜。当夜晚结束时，麦克斯和他的朋友们感到筋疲力尽，但无比快乐。他们知道他们创造了一段终生难忘的回忆，他们迫不及待地等待着野生而古怪的丛林中等待他们的下一次冒险。
                    </p>
                </section>
                <section class="section rightSideThirdSection">
                    <p>
                        在广阔的草原上，住着一群斑马，他们最喜欢的事情就是跑和玩。他们会扬起尘土，在平原上互相赛跑，黑白条纹在风中模糊成一片。有一天，他们决定用一块石头当球踢足球。规则很简单：谁把石头踢得最远谁就是赢家。斑马分成两队，比赛开始了。球员们踢着跑着，互相躲避，试图智取对手。一群好奇的长颈鹿观众随着比赛的进行欢呼呐喊。最后，比赛打成平局，两队都绕着场地欢快地奔跑庆祝。斑马们意识到输赢并不重要，重要的是他们一起玩得开心。他们走进夕阳，快乐而满足，知道他们分享了一个团结和欢乐的特殊时刻。
                    </p>
                </section>
            </article>
        </main>
    </div>
</body>
</html>

方案一：纯CSS实现（无左侧交互需求时） #

问题根源是左侧fixed元素拦截了鼠标滚动事件，导致下方的可滚动容器（.container）无法响应滚动。可以通过pointer-events: none让左侧元素不拦截鼠标事件，滚动事件会穿透到下方的.container，从而实现鼠标在左侧时也能滚动右侧内容。

修改.leftSide的CSS：

.leftSide {
    background-color: #F7F1E5;
    width: 45vw;
    height: 100%;
    position: fixed !important;
    left: 0 !important;
    z-index: 1 !important;
    padding: 2rem 1.5rem 2.5rem;
    pointer-events: none; /* 添加这行 */
}

如果左侧需要保留部分交互（比如文字选中、按钮点击），可以给需要交互的子元素单独设置pointer-events: auto：

.leftSide h2, .leftSide p {
    pointer-events: auto;
}

方案二：JavaScript实现（需保留左侧完整交互时） #

如果左侧需要完整的交互能力，纯CSS方案就不适用了，此时可以通过监听左侧元素的滚动事件，手动控制容器的滚动。

添加以下JavaScript代码：

const leftSide = document.querySelector('.leftSide');
const container = document.querySelector('.container');

leftSide.addEventListener('wheel', (e) => {
    e.preventDefault(); // 阻止左侧默认滚动行为
    // 根据滚动方向调整容器的滚动距离
    container.scrollTop += e.deltaY;
});

这段代码的逻辑是：监听左侧区域的wheel事件，阻止默认行为后，将滚动的偏移量传递给.container，让它执行滚动，从而实现鼠标在左侧时也能滚动右侧内容。

内容的提问来源于stack exchange，提问作者rumon