Question

我在scroll.Top()中遇到了滞后。仅在 Google Chrome 桌面中发生！！

我正在使用 jQuery ：

$('html, body').animate({ scrollTop: $('#second').offset().top-140 }, 'slow')

我想知道可能是什么问题。我看过这篇文章：jQuery Scroll delays (lags) on chrome but smooth on firefox，但这对我来说不是一个好的解决方案，因为它将body和html的高度设置为100％，并且document.scroll不再可用。

编辑：

这是我的代码的精简版（问题不完全与所有代码相同，但仍然相似）：您可以在此link

上看到它的运行情况

try3.html：

<!DOCTYPE html>
<html dir="rtl" lang="he">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous"></script>

        <link rel="stylesheet" href="stylesheets/app.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" />

        <link href="https://fonts.googleapis.com/css2?family=Alef:wght@400;700&display=swap" rel="stylesheet">
        <title>נוני ופורטונה</title>

    </head>
    <body>
        <Section id="header">

            <div class="scroll-down">
                <svg aria-hidden="true" onclick="$('html,body').animate({ scrollTop: $('#second').offset().top-100}, 'slow')" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 52.6" style="enable-background:new 0 0 100 52.6;" xml:space="preserve">                                 
                    <path class="st0" d="M99.3,1.1c-1-1-2.5-1-3.5,0L49.4,46.7L4.2,0.7c-1-1-2.5-1-3.5,0c-1,1-1,2.5,0,3.5l46.9,47.7
                    c0.5,0.5,1.1,0.7,1.8,0.7c0.6,0,1.1-0.2,1.6-0.6c0,0,0.1-0.1,0.1-0.1L99.3,4.6C100.2,3.7,100.2,2.1,99.3,1.1z"></path>
                </svg>
            </div>

        </Section>
        <div id="second">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam quidem nihil ipsum voluptate pariatur laudantium quod praesentium quasi commodi cupiditate sunt esse tempora, odit iusto, reiciendis assumenda tenetur est mollitia.</p>
        </div>
       
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

        <script src="scripts/script3.js"></script>
    </body>
</html>

try3.css：

html{
    scroll-behavior: smooth;
    overflow-x: hidden;

}
  
body{
    overflow-x: hidden;
    margin: 0px;
    font-family: 'Alef', sans-serif;
    background-color: #f1ead2;

}

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

  
#header{
    height: 100vh;

    background-color: #00AA6C;
    position: relative;
}
  
#second{
    position: relative;
    margin-top: 10vh;
}


  
  
.scroll-down{
    color: #fff;
    font-size: 400%;
    position: absolute;
    bottom: 4%;
    z-index: 9;
    width: 100%;
    text-align: center;
    cursor: pointer;

    animation-iteration-count: 5!important;
    -webkit-animation: upAnddown 1s infinite!important;
    animation: upAnddown 1s infinite!important;
    -webkit-animation-timing-function: ease-in-out!important;
    animation-timing-function: ease-in-out!important;
}

@keyframes upAnddown{
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(15px);
    }
    100% {
        transform: translateY(0);
    }
}
  
.scroll-down svg, #home-gallery .scroll-down svg path {
    width: 60px;
    height: 32px;
    fill: #fff;
    display: block;
    margin: auto;
}

谢谢！

Answer 1

我使用了一个名为“ ZenScroll”的JS库来处理滚动，看来它解决了延迟/延迟。

关闭帖子。

防止Chrome浏览器出现滚动动画滞后

1 个答案: