Nhận sự kiện bánh xe chuột trong jQuery?

Có cách nào để có được các sự kiện bánh xe chuột (không nói về scrollcác sự kiện) trong jQuery không?

Có một plugin phát hiện lên / xuống bánh xe chuột và vận tốc trên một vùng.

​$(document).ready(function(){
    $('#foo').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta /120 > 0) {
            console.log('scrolling up !');
        }
        else{
            console.log('scrolling down !');
        }
    });
});

Liên kết với cả hai mousewheelvà DOMMouseScrollcuối cùng làm việc rất tốt cho tôi:

$(window).bind('mousewheel DOMMouseScroll', function(event){
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
        // scroll up
    }
    else {
        // scroll down
    }
});

Phương pháp này đang hoạt động trong IE9 +, Chrome 33 và Firefox 27.

Chỉnh sửa - Tháng 3 năm 2016

Tôi quyết định xem xét lại vấn đề này vì đã được một thời gian. Trang MDN cho sự kiện cuộn có một cách tuyệt vời để truy xuất vị trí cuộn sử dụng requestAnimationFrame, rất thích hợp với phương pháp phát hiện trước đây của tôi. Tôi đã sửa đổi mã của họ để cung cấp khả năng tương thích tốt hơn ngoài hướng và vị trí cuộn:

(function() {
  var supportOffset = window.pageYOffset !== undefined,
    lastKnownPos = 0,
    ticking = false,
    scrollDir,
    currYPos;

  function doSomething(scrollPos, scrollDir) {
    // Your code goes here...
    console.log('scroll pos: ' + scrollPos + ' | scroll dir: ' + scrollDir);
  }

  window.addEventListener('wheel', function(e) {
    currYPos = supportOffset ? window.pageYOffset : document.body.scrollTop;
    scrollDir = lastKnownPos > currYPos ? 'up' : 'down';
    lastKnownPos = currYPos;

    if (!ticking) {
      window.requestAnimationFrame(function() {
        doSomething(lastKnownPos, scrollDir);
        ticking = false;
      });
    }
    ticking = true;
  });
})();

Mã này hiện đang làm việc trong Chrome v50, Firefox v44, Safari v9, and IE9+

Người giới thiệu:

• https://developer.mozilla.org/en-US/docs/Web/Events/scroll
• https://developer.mozilla.org/en-US/docs/Web/Events/wheel

Kể từ bây giờ trong năm 2017, bạn chỉ có thể viết

$(window).on('wheel', function(event){

  // deltaY obviously records vertical scroll, deltaX and deltaZ exist too
  if(event.originalEvent.deltaY < 0){
    // wheeled up
  }
  else {
    // wheeled down
  }
});

Hoạt động với Firefox 51, Chrome 56, IE9 + hiện tại

Câu trả lời nói về sự kiện "mousewheel" đang đề cập đến một sự kiện không được chấp nhận. Sự kiện tiêu chuẩn chỉ đơn giản là "bánh xe". Xem https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel

Điều này làm việc cho tôi :)

 //Firefox
 $('#elem').bind('DOMMouseScroll', function(e){
     if(e.originalEvent.detail > 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

 //IE, Opera, Safari
 $('#elem').bind('mousewheel', function(e){
     if(e.originalEvent.wheelDelta < 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

từ stackoverflow

Đây là một giải pháp vani. Có thể được sử dụng trong jQuery nếu sự kiện được truyền cho hàm là event.originalEventjQuery cung cấp dưới dạng thuộc tính của sự kiện jQuery. Hoặc nếu bên trong callbackhàm bên dưới chúng ta thêm vào trước dòng đầu tiên:event = event.originalEvent; .

Mã này bình thường hóa tốc độ / số lượng bánh xe và dương cho những gì sẽ là một cuộn về phía trước trong một con chuột thông thường và tiêu cực trong một chuyển động bánh xe chuột lùi.

Bản trình diễn: http://jsfiddle.net/BXhzD/

var wheel = document.getElementById('wheel');

function report(ammout) {
    wheel.innerHTML = 'wheel ammout: ' + ammout;
}

function callback(event) {
    var normalized;
    if (event.wheelDelta) {
        normalized = (event.wheelDelta % 120 - 0) == -0 ? event.wheelDelta / 120 : event.wheelDelta / 12;
    } else {
        var rawAmmount = event.deltaY ? event.deltaY : event.detail;
        normalized = -(rawAmmount % 3 ? rawAmmount * 10 : rawAmmount / 3);
    }
    report(normalized);
}

var event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
window.addEventListener(event, callback);

Ngoài ra còn có một plugin cho jQuery, mã dài hơn trong mã và thêm một chút đường: https://github.com/brandonaaron/jquery-mousewheel

Điều này đang hoạt động trong mỗi phiên bản mới nhất của IE, Firefox và Chrome.

$(document).ready(function(){
        $('#whole').bind('DOMMouseScroll mousewheel', function(e){
            if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
                alert("up");
            }
            else{
                alert("down");
            }
        });
    });

Tôi đã bị mắc kẹt trong vấn đề này ngày hôm nay và thấy mã này đang hoạt động tốt với tôi

$('#content').on('mousewheel', function(event) {
    //console.log(event.deltaX, event.deltaY, event.deltaFactor);
    if(event.deltaY > 0) {
      console.log('scroll up');
    } else {
      console.log('scroll down');
    }
});

sử dụng mã này

 knob.bind('mousewheel', function(e){  
 if(e.originalEvent.wheelDelta < 0) {
    moveKnob('down');
  } else {
    moveKnob('up');
 }
  return false;
});

sự kết hợp của tôi trông như thế này. nó mờ dần và mờ dần trong mỗi lần cuộn xuống / lên. nếu không, bạn phải cuộn lên tiêu đề, để làm mờ tiêu đề trong.

var header = $("#header");
$('#content-container').bind('mousewheel', function(e){
    if(e.originalEvent.wheelDelta > 0) {
        if (header.data('faded')) {
            header.data('faded', 0).stop(true).fadeTo(800, 1);
        }
    }
    else{
        if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0);
    }
});

cái trên không được tối ưu hóa cho cảm ứng / di động, tôi nghĩ cái này làm tốt hơn cho tất cả các thiết bị di động:

var iScrollPos = 0;
var header = $("#header");
$('#content-container').scroll(function () {

    var iCurScrollPos = $(this).scrollTop();
    if (iCurScrollPos > iScrollPos) {
        if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0);

    } else {
        //Scrolling Up
        if (header.data('faded')) {
            header.data('faded', 0).stop(true).fadeTo(800, 1);
        }
    }
    iScrollPos = iCurScrollPos;

});

Các plugin @DarinDimitrov đăng, jquery-mousewheel, được chia với jQuery 3+ . Sẽ tốt hơn nếu sử dụng jquery-wheelcái nào hoạt động với jQuery 3+.

Nếu bạn không muốn đi theo tuyến jQuery, MDN rất thận trọng khi sử dụngmousewheel sự kiện này vì nó không chuẩn và không được hỗ trợ ở nhiều nơi. Nó thay vào đó nói rằng bạn nên sử dụng wheelsự kiện khi bạn nhận được tính cụ thể hơn nhiều so với chính xác những giá trị bạn đang có ý nghĩa. Nó được hỗ trợ bởi hầu hết các trình duyệt chính.

Nếu sử dụng plugin jugery mousewheel đã đề cập , vậy còn sử dụng đối số thứ 2 của hàm xử lý sự kiện - delta:

$('#my-element').on('mousewheel', function(event, delta) {
    if(delta > 0) {
    console.log('scroll up');
    } 
    else {
    console.log('scroll down');
    }
});

Tôi có cùng một vấn đề thời gian gần đây mà $(window).mousewheelđã trởundefined

Những gì tôi đã làm là $(window).on('mousewheel', function() {});

Hơn nữa để xử lý nó tôi đang sử dụng:

function (event) {
    var direction = null,
        key;

    if (event.type === 'mousewheel') {
        if (yourFunctionForGetMouseWheelDirection(event) > 0) {
            direction = 'up';
        } else {
            direction = 'down';
        }
    }
}