Làm cách nào để phân biệt cuộn bằng chuột khi cuộn theo trình tự trong JavaScript?

Question

Tôi đang di chuyển một tràn DIV nội dung bằng cách thay đổi thuộc tính scrollLeft trong Javascript:

setInterval(function(){ 
    $('#scrollbox').scrollLeft($('#scrollbox').scrollLeft()+1); 
}, 50); 

Tuy nhiên, tôi muốn ngăn chặn điều này ngay khi người dùng cuộn nội dung bản thân, bằng cách sử dụng chuột. Tôi đã cố gắng phát hiện điều này bằng sự kiện cuộn

$('#scrollbox').scroll(function(){...}); 

tuy nhiên, việc cuộn tự động ở trên cũng kích hoạt sự kiện đó. Làm thế nào tôi có thể phân biệt điều này và chỉ phản ứng với cuộn do người dùng bắt đầu? (Hoặc: làm thế nào tôi có thể ngăn chặn các mã trên từ bắn một sự kiện cuộn đó cũng sẽ làm các trick?)

Answer 1

Bạn có thể sử dụng .hover(): chức năng để ngăn chặn sự di chuyển khi chuột đã qua các yếu tố scrollbox:

http://jsfiddle.net/bGHAH/1/

setInterval(function(){ 
    if(!mouseover) 
    { 
     $('#scrollbox').scrollLeft($('#scrollbox').scrollLeft()+1); 
    } 
}, 50); 

var mouseover = false; 
$('#scrollbox').hover(function(){ 
    mouseover = true; 
},function(){ 
    mouseover = false;  
}); 

---

Sửa

Dựa trên com của bạn ments tôi quản lý để tìm một plugin jquery từ trang web sau đây: special scroll events for jquery.

Plugin này chứa sự kiện cố gắng xác định xem việc cuộn có dừng lại hay không dựa trên khoảng thời gian đã trôi qua giữa bước cuộn cuối cùng và thời gian kiểm tra được thực hiện.

Để làm điều này hoạt động, tôi cần phải làm chậm khoảng thời gian của bạn chỉ trong khoảng thời gian chờ mà plugin đã sử dụng là 310 mili giây. Làm điều này có nghĩa là tôi phải tăng bước di chuyển để giữ cho nó di chuyển rõ ràng.

Dưới đây là liên kết:

http://jsfiddle.net/EWACn/1/

và đây là mã:

var stopAutoScroll = false; 

$(document).ready(function(){ 

setInterval(function(){ 
    if(!stopAutoScroll) 
    { 
     $('#status').html('scrolling'); 
     $('#scrollbox').scrollLeft($('#scrollbox').scrollLeft()+10); 
    }else{ 
     $('#status').html('not scrolling'); 
    } 
}, 310); 

$('#scrollbox').bind('scrollstart', function(e){ 
    stopAutoScroll = true; 
}); 

$('#scrollbox').bind('scrollstop', function(e){ 
    stopAutoScroll = false; 
}); 

}); 

Hope this helps.

Answer 2

Đối với FF (Mozilla):

document.addEventListener('DOMMouseScroll', handler, false);

Đối với IE, Opera và Chrome:

document.onmousewheel = handler;

Answer 3

lựa chọn khác là để có một lá cờ bên ngoài mà bạn có thể thiết lập trước cuộn có lập trình và sau đó đặt lại các từ sau. Nếu sự kiện cuộn được kích hoạt và cờ này không được đặt, bạn biết rằng người dùng chịu trách nhiệm và có thể hành động tương ứng.

Thật không may trong khi đây là trình duyệt độc lập và dễ đọc nó có thể khiến bạn tin rằng một số cuộn người dùng là những người lập trình. Tuy nhiên tôi nghĩ rằng sự xuất hiện của điều này là nhỏ và có thể đáng giá tùy thuộc vào ứng dụng bạn đang viết.

Answer 4

Hãy thử wheel event, đối với hầu hết các trình duyệt hiện đại

Sự kiện bánh xe được kích hoạt khi một nút bánh xe của một thiết bị trỏ (thường là một con chuột) được luân chuyển.