Bootstrap 3 - Chrome中的生涩滚动

我编辑了大量的CSS，当我试图在Chrome中测试它时，我注意到当我点击左上方的链接并尝试向下滚动时，而不是滚动我得到这个奇怪的摇摆生涩效果。Bootstrap 3 - Chrome中的生涩滚动

我以为我在编码方面做了一些错误的事情，所以我回到了下载目录和模板网站实时预览中的原始模板，它仍然显示相同的错误。

你可以实时预览看到它在这里（这是比我快发布的jsfiddle链接） - bootstrap freelance tempalte

点击左上角的链接，并尝试向下滚动，你应该看到的错误。在Firefox中，网站不会移动或摆动，当您向下滚动鼠标滚轮时，它会保持“冻结”状态。当您再次滚动时，问题消失。

我该如何摆脱它，有没有一种方法来确定是什么原因造成的？谢谢你的帮助。

来源

2014-08-29 TM23

问题在于下面的脚本（使用下面的代码）。

当您单击该链接时，.animate()函数正在执行1.5秒，以自动滚动到页面的顶部，即使您已经位于页面的顶部。因此，点击链接后，JavaScript正在向上滚动，而您正在向下滚动，这会给您带来生涩的效果。

删除此代码将解决此问题，但您将失去良好的缓动页滚动功能。

我确信有一种方法可以在您点击页面顶部时立即停止.animate()函数，但我不确定这是否是最好的方法......也许其他人可以帮助那部分。

这是那些经典的“它的功能，而不是bug”的场景之一。

<script src="js/freelancer.js"></script>

// jQuery for page scrolling feature - requires jQuery Easing plugin 
$(function() { 
    $('.page-scroll a').bind('click', function(event) { 
     var $anchor = $(this); 
     $('html, body').stop().animate({ 
      scrollTop: $($anchor.attr('href')).offset().top 
     }, 1500, 'easeInOutExpo'); 
     event.preventDefault(); 
    }); 
});

来源

2014-08-29 20:36:05 Schmalzy

Bootstrap 3 - Chrome中的生涩滚动

回答

相关问题