jQuery 滚动延迟（滞后）在 chrome 上但在 firefox 上平滑

Question

我试图在不使用任何滚动库的情况下制作整页动画，滚动在 firefox 浏览器上运行良好且流畅，但在 Google Chrome 上滚动动画无缘无故滞后一秒钟。 我认为 chrome 中的这种滞后是由于 scrollTop jQuery Animate 方法，但我找不到任何解决方法。 我已经附上了整个代码 sn-p，我会很感激关于如何在 chrome 上实现平滑滚动的建议。

  (function ($) {

            let $htmlBody = $('html, body');
            let $window = $(window);
            let $sections = $('section.fv');

            let $currentSection = 0;
            let $scrollDirection = 'up'; // wheel scroll direction

            // When Page First Load
            $sections.removeClass('active');
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;

            createDots();

            let $dots = $("#fv-nav ul a");

            changeActiveStatus($currentSection);

            function scrollTo($section) {

                $htmlBody.stop().animate(
                    {
                        scrollTop: $sections.eq($section).offset().top
                    }, {
                    easing: 'linear',
                    duration: 500,
                }).promise().then(function () {
                    changeActiveStatus($section);
                });
            }

            function changeActiveStatus($section) {
                $sections.removeClass('active').eq($section).addClass('active');
                $dots.removeClass('active').eq($section).addClass('active');
            }
            function createDots() {
                var div = $("<div>").attr("id", "fv-nav").append('<ul>');
                $sections.each(function (i) {
                    div.find('ul').append(`<li><a data-scroll="${i}" href="#" class=""><span></span></a></li>`)
                })
                $('body').append(div);
            }

            $dots.click(function (e) {
                e.preventDefault();
                if (!$(':animated').length) {
                    $currentSection = $(this).attr("data-scroll");
                    scrollTo($currentSection);
                }
            });

            $window.on('mousewheel DOMMouseScroll', function (event) {

                if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
                    // scroll up
                    $scrollDirection = "up";
                }
                else {
                    // scroll down
                    $scrollDirection = "down";
                }

                // Check if Already scrolling
                if (!$(':animated').length) {
                    if ($scrollDirection === "down" && $currentSection < $sections.length - 1) {
                        $currentSection++;
                        scrollTo($currentSection)
                    }

                    if ($scrollDirection === "up" && $currentSection > 0) {
                        $currentSection--;
                        scrollTo($currentSection)
                    }
                }

            });

        }(jQuery));

* {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-size: 16px;
        }

        *,
        *:before,
        *:after {
            -webkit-box-sizing: inherit;
            box-sizing: inherit;
        }

        body {
            -ms-overflow-style: none;
            overflow-x: hidden;
            overflow-y: hidden;
        }

        section {
            background-color: azure;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: translateZ(0) rotateZ(360deg);
            backface-visibility: hidden;
            perspective: 1000;
            will-change: transform;
            overflow: hidden;
        }

        #s2,
        #s4 {
            background-color: #282c34;
            color: #ffffff;
        }

        .fv {
            height: 100vh;
        }

        #fv-nav {
            position: fixed;
            top: 50%;
            left: 98%;
            transform: translate(-50%, -50%);
        }

        #fv-nav ul {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            list-style: none;
        }

        #fv-nav ul li a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 9px;
            height: 9px;
            margin: 7px;
            text-align: center;
        }

        #fv-nav ul a span {
            display: block;
            width: 7px;
            height: 7px;
            transition: 0.2s ease all;
        }

        #fv-nav ul a.active span {
            width: 9px;
            height: 9px;
        }

        #fv-nav ul a:hover span {
            width: 9px;
            height: 9px;
        }

        #fv-nav ul li a span {
            display: block;
            z-index: 1;
            cursor: pointer;
            text-decoration: none;
            background-color: #1c85e1;
            border-radius: 50%;
        }

        #fv-nav ul li a.active span {
            background-color: #01427a;
        }

<section id="s1" class="fv">
        <h2>Section 1</h2>
    </section>
    <section id="s2" class="fv">
        <h2>Section 2</h2>
    </section>
    <section id="s3" class="fv">
        <h2>Section 3</h2>
    </section>
    <section id="s4" class="fv">
        <h2>Section 4</h2>
    </section>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

我找到了解决方案（或解决方法）：

我只需要更改一些 CSS 样式：

html { overflow-x: hidden; overflow-y: hidden; height: 100%; }
body { overflow: hidden; height: 100%;}

现在滚动它在 firefox 和 chrome 上都可以流畅地制作动画