javascript Chrome中的ScrollTop jerky

tvz2xvvm 于 2023-05-27 发布在 Java

关注(0)|答案(1)|浏览(114)

我有这个代码，我无法实现流体运动使用滚动到顶部功能和立方贝塞尔/'easeInOutCubic'在较低的速度（例如4000-6000）。
我尝试了不同的选择，但没有运气。另外，我想提一下，我被迫使用jQuery 2.1.3，因为我试图在www.example.com环境中实现此功能cargo.site，并且他们有这个版本，无法在自定义html部分中替换。
我会考虑一个纯CSS的替代品，以及如果立方贝塞尔可以模仿。
在最新版本的Chrome 113.0.5672.127，Win 10 64 x中测试。谢谢。

$(window).scroll(function() {
    if ($(this).scrollTop() > 350) {
        $('#scrlTop').fadeIn();
    } else {
        $('#scrlTop').fadeOut();
    }
});

$('#scrlTop').click(function () {
    $('html, body').animate({
        scrollTop: '0px'
    }, 4800, 'easeInOutCubic');
    return false;
});

#scrlTop {
      position: fixed;
      bottom: 16.6px;
      right: 18px;
      width: 57px;
      height: 57px;
      border-radius: 0%;
      background-color: black;
      display: none;
      backface-visibility: hidden;
      transform: translateZ(0);
}


/* Extra Things */
body{background-image: url(https://images.unsplash.com/photo-1484542603127-984f4f7d14cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTh8fHxlbnwwfHx8fHw%3D&w=1000&q=80);font-family: 'Open Sans', sans-serif;}h3{font-size: 30px; font-weight: 400;text-align: center;margin-top: 50px;}h3 i{color: #c6c6c6;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<a id="scrlTop" href="#" class="hide"></a>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<!-- ICON NEEDS FONT AWESOME FOR CHEVRON UP ICON -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<div style="height:2000px;">
  
  <h3>Scroll down</h3>
  <h3><i class="icon-arrow-down"></i>
  <h3>Scroll down</h3>
  <h3><i class="icon-arrow-down"></i>
  <h3>Scroll down</h3>
  <h3><i class="icon-arrow-down"></i>
  <h3>Scroll down</h3>
  <h3><i class="icon-arrow-down"></i>
  </h3></h3></h3></h3> 
</div>

JavaScript

来源：https://stackoverflow.com/questions/76336015/scrolltop-jerky-in-chrome

1条答案

按热度按时间

yzxexxkh1#

我已经成功地使用Vanilla JS而不使用jQuery。在www.example.com环境中运行顺畅cargo.site。

var scrlTop = document.getElementById('scrlTop');

window.addEventListener('scroll', function() {
    if (window.pageYOffset > 350) {
        fadeIn(scrlTop);
    } else {
        fadeOut(scrlTop);
    }
});

scrlTop.addEventListener('click', function() {
    animateScrollTop(0, 4800);
    return false;
});

function fadeIn(element) {
    element.style.display = 'block';
}

function fadeOut(element) {
    element.style.display = 'none';
}

function animateScrollTop(target, duration) {
    var startPosition = window.pageYOffset;
    var distance = target - startPosition;
    var startTime = null;

    function scrollAnimation(currentTime) {
        if (startTime === null) {
            startTime = currentTime;
        }
        var timeElapsed = currentTime - startTime;
        var scrollPosition = easeInOutCubic(timeElapsed, startPosition, distance, duration);
        window.scrollTo(0, scrollPosition);

        if (timeElapsed < duration) {
            requestAnimationFrame(scrollAnimation);
        }
    }

    function easeInOutCubic(t, b, c, d) {
        t /= d/2;
        if (t < 1) {
            return c/2*t*t*t + b;
        }
        t -= 2;
        return c/2*(t*t*t + 2) + b;
    }

    requestAnimationFrame(scrollAnimation);
}

#scrlTop {
      position: fixed;
      bottom: 16.6px;
      right: 18px;
      width: 57px;
      height: 57px;
      border-radius: 0%;
      background-color: black;
      display: none;
      backface-visibility: hidden;
      transform: translateZ(0);
}


/* Extra Things */
body{background-image: url(https://images.unsplash.com/photo-1484542603127-984f4f7d14cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTh8fHxlbnwwfHx8fHw%3D&w=1000&q=80);font-family: 'Open Sans', sans-serif;}h3{font-size: 30px; font-weight: 400;text-align: center;margin-top: 50px;}h3 i{color: #c6c6c6;}

<a id="scrlTop" href="#" class="hide"></a>

<!-- ICON NEEDS FONT AWESOME FOR CHEVRON UP ICON -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<div style="height:2000px;">
  
  <h3>Scroll down</h3>
  <h3><i class="icon-arrow-down"></i>
  <h3>Scroll down</h3>
  <h3><i class="icon-arrow-down"></i>
  <h3>Scroll down</h3>
  <h3><i class="icon-arrow-down"></i>
  <h3>Scroll down</h3>
  <h3><i class="icon-arrow-down"></i>
  </h3></h3></h3></h3> 
</div>

赞(0）回复(0）举报 2023-05-27

我来回答

javascript Chrome中的ScrollTop jerky

1条答案

相关问题

热门标签

最新问答