Chrome và IE: thị sai (jQuery animate) không mượt mà khi sử dụng bánh xe chuột để cuộn

Question

Tôi đã chỉnh sửa this plugin cho jQuery sử dụng hiệu ứng thị sai cho trang web của tôi. Vấn đề là (ngay cả trong bản demo trong liên kết ở trên) Chrome và IE có một cuộn KHÔNG thực sự trơn tru .. nó chỉ hoạt động tốt khi bạn nhấn nút giữa trên chuột và cuộn liên tục (không phải "từng bước một bước "khi bạn di chuyển con lăn chuột). Vì vậy, khi bạn sử dụng bánh xe chuột để cuộn, hiệu ứng thị sai hoàn toàn bị hủy hoại. Trong Firefox thay vì cuộn liên tục ngay cả khi cuộn bằng bánh xe chuột. Có cách nào để có liên tục cuộn trong IE và Chrome quá (javascript?).

Here 's trang web của tôi (như bạn có thể thấy, nếu bạn ghé thăm nó whit Firefox hiệu quả là hoàn toàn khác nhau).

Answer 1

Tôi đã giải quyết vấn đề với tập lệnh jQuery này (thêm EventListener cho cả cuộn bàn phím và chuột), hy vọng nó sẽ giúp. :)

if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false); 
window.onmousewheel = document.onmousewheel = wheel; 

var time = 1300; 
var distance = 270; 

function wheel(event) { 
    if (event.wheelDelta) delta = event.wheelDelta/120; 
    else if (event.detail) delta = -event.detail/3; 

    handle(); 
    if (event.preventDefault) event.preventDefault(); 
    event.returnValue = false; 
} 

function handle() { 

    $('html, body').stop().animate({ 
     scrollTop: $(window).scrollTop() - (distance * delta) 
    }, time); 
} 


$(document).keydown(function (e) { 

    switch (e.which) { 
     //up 
     case 38: 
      $('html, body').stop().animate({ 
       scrollTop: $(window).scrollTop() - distance 
      }, time); 
      break; 

      //down 
     case 40: 
      $('html, body').stop().animate({ 
       scrollTop: $(window).scrollTop() + distance 
      }, time); 
      break; 
    } 
}); 

Answer 2

Tôi đã sửa đổi mã một chút cho bàn phím và giật không còn xuất hiện trong IE và Chrome nữa.

http://jsfiddle.net/cZuym/247/

Tôi vừa thêm e.preventDefault();

if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false); 
window.onmousewheel = document.onmousewheel = wheel; 

var time = 1000; 
var distance = 300; 

function wheel(event) { 
    if (event.wheelDelta) delta = event.wheelDelta/120; 
    else if (event.detail) delta = -event.detail/3; 

    handle(); 
    if (event.preventDefault) event.preventDefault(); 
    event.returnValue = false; 
} 

function handle() { 

    $('html, body').stop().animate({ 
     scrollTop: $(window).scrollTop() - (distance * delta) 
    }, time); 
} 


$(document).keydown(function (e) { 

    switch (e.which) { 
     //up 
     case 38: 
      e.preventDefault(); 
      $('html, body').stop().animate({ 
       scrollTop: $(window).scrollTop() - distance 
      }, time); 
      break; 

      //down 
     case 40: 
      e.preventDefault(); 
      $('html, body').stop().animate({ 
       scrollTop: $(window).scrollTop() + distance 
      }, time); 
      break; 
    } 
});