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

Posted 2023-05-08

【中文标题】jQuery 滚动延迟（滞后）在 chrome 上但在 firefox 上平滑

【英文标题】：jQuery Scroll delays (lags) on chrome but smooth on firefox

【发布时间】：2020-10-11 23:44:19

【问题描述】：

我试图在不使用任何滚动库的情况下制作整页动画，滚动在 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>

【参考方案1】：

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

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

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

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