Kiểm tra xem người dùng có đang cuộn bằng bàn di chuột không?

Question

Tôi đã tạo một trang web nơi người dùng có thể cuộn qua thư viện bằng cách sử dụng cuộn chuột hoặc mũi tên lên/xuống. Nó hoạt động như tôi muốn, và thay đổi một cuộn hình ảnh khi cuộn bằng chuột. Nhưng nếu người dùng đang cuộn bằng bàn di chuột, gần như không thể cuộn từng ảnh một. Vì vậy, câu hỏi của tôi là: Có cách nào để kiểm tra xem người dùng có đang di chuyển bằng bàn di chuột hay không, sau đó thay đổi hành vi cuộn, vì vậy nó trở nên ít nhạy cảm hơn và do đó dễ dàng cuộn một hình ảnh cùng một lúc?

Tôi không giỏi jquery, giải pháp của tôi cho đến nay đã được đặt lại với nhau từ một vài kịch bản:

http://jsfiddle.net/MukuMedia/PFjzX/33/

Hope ai đó có thể giúp tôi :)

Answer 1

Không, đây là không thể. Giải pháp duy nhất tôi có thể nghĩ đến là đặt giới hạn cho tốc độ cuộn. Tôi sẽ không thử giải mã mã của bạn nhưng tôi khuyên bạn nên tạo biến số timedOut được khởi tạo bằng 0 được đặt thành mỗi lần bạn cuộn đến một hình ảnh mới. Sử dụng setTimeout() để đặt trở về 0 sau 50ms. Trước khi bạn cuộn đến một hình ảnh mới, hãy kiểm tra biến này timedOut và chỉ cuộn nếu đó là số không. (Hãy chắc chắn rằng bạn đặt setTimeout bên trong của bạn kiểm tra timedOut, nếu không nó sẽ được liên tục gọi mỗi khi di chuyển con lăn, mà không phải là những gì bạn muốn.)

Answer 2

Tôi chạy vào một vấn đề tương tự với một "phần thay đổi" plugin mà tôi đã tạo. Tôi đã kết thúc giải quyết nó bằng biến "hoạt hình": hành động bánh xe chỉ hoạt động nếu biến này được đặt thành 'false' và khi điều này được kích hoạt biến sẽ chuyển thành 'true', thì tôi sẽ chuyển biến trở lại 'false' một lần hoạt ảnh được hoàn thành. Hy vọng điều này sẽ hữu ích!

Answer 3

tôi phát hiện ra rằng con số kỳ diệu ở đây là 40.

Dường như với trackpad (có lẽ với chuột magic quá) vùng đồng bằng được tăng lên 40 lần.

Và nó vẫn như vậy ngay cả khi bạn lấy lại con chuột bình thường của bạn và di chuyển với nó sau này.

Vì vậy, những gì tôi đã làm, bằng cách sử dụng jquery mousewheel plugin:

b.mousewheel(function(evt,delta,deltaX,deltaY){ 
    if(Math.abs(deltaY)>=40) 
     deltaY/=40; 
    if(Math.abs(deltaX)>=40) 
     deltaX/=40; 

    //Do your stuff here. 
}); 

Answer 4

này là khá nhiều những gì DC_ gợi ý. Tôi đoán rằng tôi đã đăng bài này vì nó là một triển khai thực tế.

// similar to _.debounce, but was having issues with it, so I made this. 
function rateLimit(func, time){ 
     var callback = func, 
       waiting = false, 
       context = this; 
     var rtn = function(){ 
      if(waiting) return; 
      waiting = true; 
      var args = arguments; 
      setTimeout(function(){ 
       waiting = false; 
       callback.apply(context, args); 
      }, time); 
     }; 
     return rtn; 
    } 

    function onWheel(e){ 
     // do whatever 
    } 

    // will only fire a maximum of 10 times a second 
    var debouncedOnWheel = rateLimit(onWheel, 100); 
    window.addEventListener("onwheel", debouncedOnWheel); 

Answer 5

Tôi đã tìm thấy giải pháp phát hiện nếu người dùng đang sử dụng bàn di chuột. Nó hoạt động rất tốt và chỉ có hai nhược điểm nhỏ.

Trước tiên, nó phát hiện mousescroll sau sự kiện được kích hoạt đầu tiên, do đó, chỉ cần một cú nhấp chuột với con lăn chuột không làm gì cả. Nhưng đây chỉ là lần đầu tiên. Sau đó, chúng tôi có thể lưu trữ giá trị dẫn đến vấn đề nhỏ thứ hai. Khi người dùng có một trackpad và một con chuột với bánh xe nó phát hiện bất cứ điều gì được sử dụng đầu tiên. Đối với tôi những vấn đề đó là không đáng kể. Ở đây, mã

var scrolling = false; 
var oldTime = 0; 
var newTime = 0; 
var isTouchPad; 
var eventCount = 0; 
var eventCountStart; 

var mouseHandle = function (evt) { 
    var isTouchPadDefined = isTouchPad || typeof isTouchPad !== "undefined"; 
    console.log(isTouchPadDefined); 
    if (!isTouchPadDefined) { 
     if (eventCount === 0) { 
      eventCountStart = new Date().getTime(); 
     } 

     eventCount++; 

     if (new Date().getTime() - eventCountStart > 50) { 
       if (eventCount > 5) { 
        isTouchPad = true; 
       } else { 
        isTouchPad = false; 
       } 
      isTouchPadDefined = true; 
     } 
    } 

    if (isTouchPadDefined) { // in this if-block you can do what you want 
     // i just wanted the direction, for swiping, so i have to prevent 
     // the multiple event calls to trigger multiple unwanted actions (trackpad) 
     if (!evt) evt = event; 
     var direction = (evt.detail<0 || evt.wheelDelta>0) ? 1 : -1; 

     if (isTouchPad) { 
      newTime = new Date().getTime(); 

      if (!scrolling && newTime-oldTime > 550) { 
       scrolling = true; 
       if (direction < 0) { 
        // swipe down 
       } else { 
        // swipe up 
       } 
       setTimeout(function() {oldTime = new Date().getTime();scrolling = false}, 500); 
      } 
     } else { 
      if (direction < 0) { 
       // swipe down 
      } else { 
       // swipe up 
      } 
     } 
    } 
} 

document.addEventListener("mousewheel", mouseHandle, false); 
document.addEventListener("DOMMouseScroll", mouseHandle, false);