jquery vertical mousewheel smooth scrolling

Question

Tôi đang tạo một trang web thị sai và tôi muốn làm cho trang cuộn mượt mà hơn với con lăn chuột để có trải nghiệm người dùng tốt hơn. Ví dụ tốt nhất tôi có thể nhận được là trang web này: http://www.milwaukeepolicenews.com/#menu=home-page Sẽ thật tuyệt nếu tôi có thể nhận được một thứ gì đó tương tự như trang web của tôi, thanh cuộn cuộn và cuộn thẳng đứng trơn tru.

Tôi nhận thấy họ đang sử dụng con lăn chuột của Brandon Aaron vốn rất nhẹ nhưng tôi chỉ là người mới bắt đầu và không thể tự làm việc.

Ngoài ra tôi nhận thấy điều này trong MPD-parallax.js của họ:

jQuery(window).mousewheel(function(event, delta, deltaX, deltaY){ 
     if(delta < 0) page.scrollTop(page.scrollTop() + 65); 
     else if(delta > 0) page.scrollTop(page.scrollTop() - 65); 
     return false; 
    }) 

Cảm ơn bạn!

EDIT

Tôi gần như ở đó. Hãy xem fiddle này: http://jsfiddle.net/gmelcul/cZuym/ Nó chỉ cần thêm một phương pháp nới lỏng để cuộn giống như trang web Cảnh sát Milwaukee.

Answer 1

Dưới đây là hai jsfiddles - một với kịch bản và một không có nó, do đó bạn có thể so sánh:

• with script
• without script

JavaScript bằng jQuery mousewheel plugin:

$(document).ready(function() { 
    var page = $('#content'); // set to the main content of the page 
    $(window).mousewheel(function(event, delta, deltaX, deltaY){ 
     if (delta < 0) page.scrollTop(page.scrollTop() + 65); 
     else if (delta > 0) page.scrollTop(page.scrollTop() - 65); 
     return false; 
    }) 
}); 

So sánh cả hai. Từ những gì tôi có thể nói, kịch bản làm chậm bánh xe chuột vì vậy nó đòi hỏi phải quay về thể chất hơn để cuộn cùng khoảng cách như không có tập lệnh. Nó có thể cảm thấy mượt mà hơn vì cuộn chậm hơn (và nó thực sự mượt mà hơn vì nó có thể dễ dàng hơn trên thiết bị đồ họa).

Answer 2

Khám phá skrollr. Đó là một plugin để tạo hiệu ứng thị sai. Nó có tùy chọn khi bạn khởi tạo các plugin để chuyển di chuyển mượt mà:

var s = skrollr.init({ 
    smoothScrolling: true, 
    smoothScrollingDuration: 1800 
}); 

Answer 3

tôi thấy plugin này, nó có một số tùy chọn thoải mái và hoạt động trên tất cả các thiết bị lớn http://areaaperta.com/nicescroll/

Answer 4

hey tôi đã khác ressource đây mà thực sự là đơn giản để sử dụng smoothwheel

Nó cho phép hoạt ảnh cuộn trơn tru trên con lăn chuột trên mọi thiết bị và hoạt động hoàn hảo!

Answer 5

Tôi biết đó là một bài thực sự cũ, nhưng đây là một giải pháp tốt tôi đã thực hiện:

function handle(delta) { 
    var animationInterval = 20; //lower is faster 
    var scrollSpeed = 20; //lower is faster 

    if (end == null) { 
    end = $(window).scrollTop(); 
    } 
    end -= 20 * delta; 
    goUp = delta > 0; 

    if (interval == null) { 
    interval = setInterval(function() { 
     var scrollTop = $(window).scrollTop(); 
     var step = Math.round((end - scrollTop)/scrollSpeed); 
     if (scrollTop <= 0 || 
      scrollTop >= $(window).prop("scrollHeight") - $(window).height() || 
      goUp && step > -1 || 
      !goUp && step < 1) { 
     clearInterval(interval); 
     interval = null; 
     end = null; 
     } 
     $(window).scrollTop(scrollTop + step); 
    }, animationInterval); 
    } 
} 

thử nghiệm nó: http://jsfiddle.net/y4swj2ts/3/