jQuery Scroll delays (lags) on chrome but smooth on firefox

问题

I was trying to do full page animation without using any scrolling library, the scroll works fine and smooth on the firefox browser, but on Google Chrome scroll animation lags for a second for no reason. I thought this lag in chrome is because of the scrollTop jQuery Animate method, but I wasn't able to find any workaround. I have attached the whole code snippet, I would appreciate suggestions on how I can achieve a smooth scroll on 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>

回答1:

I found the solution (or workaound):

All I have to change some CSS styles:

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

Now Scroll it is animating smoothly on both firefox and chrome

来源：https://stackoverflow.com/questions/62508912/jquery-scroll-delays-lags-on-chrome-but-smooth-on-firefox