自定义滚动条Div悬停时阻止滚轮滚动的问题求助

我最近在做一个自定义的悬浮滚动条，滚动条的拖拽功能都正常，但碰到了个头疼的小问题：

当我把鼠标放在自定义滚动条的轨道（绿色区域）或者滑块（灰色区域）上时，用鼠标滚轮根本没法滚动内容，只有鼠标移出这个滚动条区域，滚轮滚动才正常工作。

示意图：自定义滚动条的绿色轨道与灰色滑块区域

下面是我目前的代码，麻烦大家帮忙看看哪里出问题了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom Floating Scrollbar</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        main {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            position: relative;
        }

        .scroll-content {
            width: 100%;
            height: 100%;
            overflow-y: scroll;
            scrollbar-width: none; /* Firefox */
        }

        .scroll-content::-webkit-scrollbar {
            display: none; /* Chrome */
        }

        .custom-scrollbar {
            position: absolute;
            top: 0;
            right: 30px;
            width: 50px;
            height: 100%;
            background-color: #3CB521;
        }

        .scroll-thumb {
            width: 100%;
            height: 50px;
            background: gray;
            position: absolute;
            top: 0;
            transition: background 0.2s;
            padding-right: 30px;
        }

        .scroll-thumb::after {
            content: "";
            position: absolute;
            top: 0;
            right: -30px;
            width: 30px;
            height: 100%;
            background: transparent;
        }

        .scroll-thumb:hover, .scroll-thumb:active {
            background: black;
        }

        section {
            width: 100%;
            height: 100vh;
            display: grid;
            place-items: center;
            font-size: 8em;
        }

        section:nth-child(1) {
            background: #fff2cc;
        }

        section:nth-child(2) {
            background: #e2f0d9;
        }

        section:nth-child(3) {
            background: #deebf7;
        }

        section:nth-child(4) {
            background: #fbe5d6;
        }

    </style>
</head>
<body>
<main>
    <div class="scroll-content">
        <section>1</section>
        <section>2</section>
        <section>3</section>
        <section>4</section>
    </div>
    <div class="custom-scrollbar">
        <div class="scroll-thumb"></div>
    </div>
</main>
<script>
    const content = document.querySelector('.scroll-content');
    const scrollbar = document.querySelector('.custom-scrollbar');
    const thumb = document.querySelector('.scroll-thumb');

    function updateThumbHeight() {
        let contentHeight = content.scrollHeight;
        let visibleHeight = content.clientHeight;
        let thumbHeight = Math.max((visibleHeight / contentHeight) * visibleHeight, 10);
        thumb.style.height = `${thumbHeight}px`;
    }

    function syncThumbPosition() {
        let scrollRatio = content.scrollTop / (content.scrollHeight - content.clientHeight);
        let maxThumbTop = scrollbar.clientHeight - thumb.clientHeight;
        thumb.style.top = `${scrollRatio * maxThumbTop}px`;
    }

    content.addEventListener('scroll', () => {
        requestAnimationFrame(syncThumbPosition);
        sessionStorage.setItem("scrollPosition", content.scrollTop);
    }, {passive: true});

    window.addEventListener('load', () => {
        updateThumbHeight();
        let savedScrollPosition = sessionStorage.getItem("scrollPosition");
        if (savedScrollPosition !== null) {
            content.scrollTop = parseInt(savedScrollPosition, 10);
            syncThumbPosition();
        }
    });

    let isDragging = false, startY, startScrollTop;

    thumb.addEventListener('mousedown', (e) => {
        isDragging = true;
        startY = e.clientY;
        startScrollTop = content.scrollTop;
        document.body.style.userSelect = 'none';
    });

    document.addEventListener('mouseup', () => {
        isDragging = false;
        document.body.style.userSelect = '';
    });

    document.addEventListener('mousemove', (e) => {
        if (!isDragging) return;
        let deltaY = e.clientY - startY;
        let scrollRatio = (content.scrollHeight - content.clientHeight) / (scrollbar.clientHeight - thumb.clientHeight);
        content.scrollTop = startScrollTop + deltaY * scrollRatio;
    });

    window.addEventListener('resize', () => {
        updateThumbHeight();
        syncThumbPosition();
    });

    if ('scrollRestoration' in history) {
        history.scrollRestoration = "manual";
    }
</script>
</body>
</html>

具体问题 #

• 鼠标悬停在自定义滚动条轨道（绿色区域）或滑块（灰色区域）上时，鼠标滚轮滚动无法触发内容滚动
• 鼠标在滚动条区域外时，滚轮滚动功能完全正常

预期效果 #

• 不管鼠标是不是放在自定义滚动条上，只要滚动鼠标滚轮，内容都能正常跟着滚动

备注：内容来源于stack exchange，提问作者WeiJie Liu