Chrome中的ScrollTop真的很生涩 [英] ScrollTop really jerky in Chrome

问题描述

我使用scrollTop函数创建视差滚动网站，将scrollTop函数绑定到整个网站的不同锚点。

我遇到的问题是在Chrome浏览器中滚动变得非常不稳定/不平坦，但在某种程度上它在Firefox中很好。

我的代码如下：

  $（'。recipes'）。click（function（）{
 $（'html，body'）。animate（{
 scrollTop：$ （.main1）。offset（）。top 
}，1500）; 
}）; 
 $ b $（'。cooking'）。click（function（）{
 $（'html，body'）。animate（{
 scrollTop：$（。main2 ）.offset（）。top 
}，1500）; 
}）; 
  

有没有其他方法可以做到这一点，所以网页滚动不是生涩？也许我可以添加一个缓动函数？

• 编辑 -

如果我删除了下面的函数，那么这个生涩似乎就消失了，代码有什么问题，或者可能有不同的写法？

  var startY = $（'＃container'）。position（）。top + $（'＃container'）。outerHeight（）; 
 $ b $（window）.scroll（function（）{
 checkY（）; 
}）; （$（window）.scrollTop（）> startY）{
 $（'＃backToTop，#navigation'）。fadeIn（600） ）; 
} else {
 $（'＃backToTop，#navigation'）。fadeOut（600）; 
} 
} 
 
 checkY（）; 
  

第二次编辑

 < code $（document）.ready（function（）{
 
 $（'。recipes'）。click（function（）{
 $ .scrollTo（'。main1' ，1500）
））; 
 
 $（'。cooking'）。click（function（）{
 $ .scrollTo（'。main2'，1500）$ b $ （）（$（this）.scrollTop（）> 600（b）}; 
 
 $（function（）{
 $（window）.scroll ）{
 $（'＃backToTop，#navigation'）。show（）; 
} else {
 $（'＃backToTop，#navigation'）。hide（）; 
} 
}）; 
}）; 
 
}）; 
  

解决方案

http://api.jquery.com/scroll/ =nofollow> .scroll（） ，每当页面滚动一点点，在 .animate（）回调中执行，它只在滚动完成时触发一次。

  $（'。recipes'）。click（ function（）{
 var startY = $（'＃container'）。position（）。top + $（'＃container'）。outerHeight（）; 
 $（'html，body'）。 animate（
 {scrollTop：$（。main1）。offset（）。top}，
 1500，
 function（）{
 checkY（startY）; 
} 
）; 
}）; 
 $ b $（'。cooking'）。click（function（）{
 var startY = $（'＃container'）。position（）。top + $（'＃container'） .outerHeight（）; 
 $（'html，body'）。animate（
 {scrollTop：$（。main2）。offset（）。top}，
 1500，
 function（）{
 checkY（startY）; 
} 
）; 
}）; 
  

并且OP的原始 checkY（）函数：

 函数checkY（i）{
 if（$（window）.scrollTop（）> i）{ 
 $（'＃backToTop，#navigation'）。fadeIn（600）; 
} else {
 $（'＃backToTop，#navigation'）。fadeOut（600）; 
} 
} 
  

I'm using the scrollTop function to create a parallax scrolling website, binding the scrollTop function to different anchors throughout my website.

The problem I'm having is that the scrolling becomes really choppy/jerky in Chrome, but somehow its fine in Firefox.

My code is as follows:

 $('.recipes').click(function(){
 $('html,body').animate({
 scrollTop: $(".main1").offset().top
 }, 1500);
 });

 $('.cooking').click(function(){
 $('html,body').animate({
 scrollTop: $(".main2").offset().top
 }, 1500);
 });

Is there possibly an alternate way to do this so the website scroll isn't as jerky? maybe an easing function I can add?

• EDIT-

If I remove the following function, the jerkyness seems to go away, is there something wrong with the code or possibly a different way to write it?

var startY = $('#container').position().top + $('#container').outerHeight();

$(window).scroll(function(){
checkY();
});

function checkY(){
if( $(window).scrollTop() > startY ){
    $('#backToTop, #navigation').fadeIn(600);
}else{
    $('#backToTop, #navigation').fadeOut(600);
}
}

checkY();

SECOND EDIT

$(document).ready(function(){

$('.recipes').click(function(){
    $.scrollTo('.main1', 1500)
 });

$('.cooking').click(function(){
    $.scrollTo('.main2', 1500)
});

$(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 600) {
            $('#backToTop, #navigation').show();
        } else {
            $('#backToTop, #navigation').hide();
        }
    });
    }); 

});

解决方案

Instead of doing your fade function on .scroll(), which is fired every time the page scrolls a tiny bit, do it on the .animate() callback, which is only triggered once when the scrolling is complete.

$('.recipes').click(function(){
     var startY = $('#container').position().top + $('#container').outerHeight();
     $('html,body').animate(
          { scrollTop: $(".main1").offset().top },
          1500,
          function() {
             checkY(startY);
          } 
     );
});

$('.cooking').click(function(){
     var startY = $('#container').position().top + $('#container').outerHeight();
     $('html,body').animate(
         { scrollTop: $(".main2").offset().top },
         1500,
         function(){
             checkY(startY);
         }
     );
});

And the OP's original checkY() function:

function checkY(i) {
    if( $(window).scrollTop() > i ) {
        $('#backToTop, #navigation').fadeIn(600);
    } else {
        $('#backToTop, #navigation').fadeOut(600);
    }
}

这篇关于Chrome中的ScrollTop真的很生涩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！