首页 > 一段简单的jQuery效果在Chrome for Mac下会出现顿卡情况,其余浏览器正常

一段简单的jQuery效果在Chrome for Mac下会出现顿卡情况,其余浏览器正常

一小段简单的jQuery代码,试图实现右边栏淡入淡出的效果。结果在Chrome for Mac下有明显的顿卡迹象(Mac系统为El Captain),其他浏览器下均正常。

如果是Mac用户可直接访问网站感受上面描述的效果:网站传送门

提供小视频参考访问网站效果:
Chrome for Mac:视频传送门
其他浏览器:视频传送门

jQuery代码:

<script>
      var scroll = $('.toggle-span');
      var wrapper1 = $('#mainpage');
      var wrapper2 = $('.wrapper2');
      var maincontent = $('#main-content');
      var side = $('.col-md-4');
      var collpas = $('.toggle-span2');


      scroll.click(function(){
        // wrapper1.removeClass('wrapper').addClass('wrapper2');
        side.css('display','block');
        $(this).css('display','none');
        collpas.css('display','block');
        maincontent.removeClass('inner').addClass('col-md-8');
        
      })

      collpas.click(function(){
         maincontent.removeClass('col-md-8').addClass('inner');
         side.css('display','none');
         scroll.css('display','block');
         $(this).css('display','none');
      })

      $(window).scroll(function(){
        scroll.css('top',Math.max(60,150-$(this).scrollTop()));
      })
</script>

想知道是什么原因导致这一jQuery效果会在Chrome里卡的。


我这没问题啊。。。Chrome版本 46.0.2490.86 (64-bit)


$(window).scroll(function(){
  scroll.css('top',Math.max(60,150-$(this).scrollTop())); 
})

感觉如果有问题的话,应该是这段,请使用节流器来优化下性能,看看还会不会。
JavaScript函数节流与函数去抖

或者是使用underscore工具,里面有带一个节流方法。

【热门文章】
【热门文章】