固定Body实现区块内滚动效果不流畅，鼠标需额外滚动触发

我正在为网站实现一款滚动动画，需求如下：

• 用户向下滚动页面，查看未完全展示的卡片区块；
• 当滚动至卡片区块到达视口顶部时，body需固定，卡片在100vh容器内滚动。

目前已接近实现该效果，但存在问题：使用鼠标而非触控板时，需多滚动一次才能触发容器内的卡片滚动。无法确定问题根源，也不确定整体实现思路是否有误。

代码实现 #

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>HTML Document</title>
    <link rel="stylesheet" href="index.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="index.js"></script>

</head>

<body>
        <div style="background-color: red; height: 300px;"></div>
        <div style="background-color: green; height: 400px;"></div>
        
        <div id="container" class="card-container" style="background-color: yellow;">
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
        </div>

        <div style="background-color: purple; height: 500px;"></div>
        <div style="background-color: navy; height: 500px;"></div>


</body>

</html>

CSS

html {
  scroll-behavior: smooth;
}
.card-container{
    display: flex;
    position: sticky;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100vh;
    border-radius: 100px;
    overflow: hidden;
}

.allow-scroll{
    overflow: auto;
}

.stop-scroll{
    overflow: hidden;
}

.card{
    width: 400px;
    height: 600px;
    margin: 10px;
    background-color: cadetblue;
    border-radius: 50px;
}

JavaScript

$(document).ready(function () {

    var page = $("body");
    var container = $("#container");
    var containerTop = container.offset().top;

    var lastWindowTop = 0;
    $(window).scroll(function (e) {
        var windowTop = $(window).scrollTop();
        console.log("Scrolling down window: ", isScrollingDown(lastWindowTop, windowTop));

        if (isScrollingDown(lastWindowTop, windowTop) && windowTop > containerTop && !isScrolledTillTheEnd(container)) {
            container.addClass("allow-scroll");
            page.addClass("stop-scroll");
        }

        if (!isScrollingDown(lastWindowTop, windowTop) && containerTop > windowTop && isScrolledTillTheEnd(container)) {
            container.addClass("allow-scroll");
            page.addClass("stop-scroll");
        }

        lastWindowTop = $(this).scrollTop();
    });

    var lastContainerTop = 0;
    container.scroll(function () {
        var containerTop = container.scrollTop();
        // console.log("Scrolling down: ", isScrollingDown(lastContainerTop, containerTop));

        if(isScrollingDown(lastContainerTop, containerTop) && isScrolledTillTheEnd(container)){
            container.removeClass("allow-scroll");
            page.removeClass("stop-scroll");
        }

        if(!isScrollingDown(lastContainerTop, containerTop) && isScrolledTillTheTop(container)){
            container.removeClass("allow-scroll");
            page.removeClass("stop-scroll");
        }

        lastContainerTop = $(this).scrollTop();
    });


    function isScrolledTillTheEnd(e){
        return (e[0].scrollHeight - e[0].offsetHeight) <= e.scrollTop();
    }

    function isScrolledTillTheTop(element){
        return element.scrollTop() == 0;
    }

    function isScrollingDown(lastWindowTop, currentWindowScrollTop) {
        return currentWindowScrollTop > lastWindowTop;
    }

});

内容的提问来源于stack exchange，提问作者Anna Polyakova turnhandup