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中的生澀滾動

回答

相關問題