Bình thường hóa tốc độ con lăn trên các trình duyệt

Đối với một câu hỏi khác tôi đã soạn câu trả lời này , bao gồm cả mã mẫu này .

Trong mã đó, tôi sử dụng bánh xe chuột để phóng to / thu nhỏ Canvas Canvas. Tôi đã tìm thấy một số mã bình thường hóa sự khác biệt về tốc độ giữa Chrome và Firefox. Tuy nhiên, việc xử lý thu phóng trong Safari nhanh hơn nhiều so với cả hai.

Đây là mã tôi hiện có:

var handleScroll = function(e){
  var delta = e.wheelDelta ? e.wheelDelta/40 : e.detail ? -e.detail/3 : 0;
  if (delta) ...
  return e.preventDefault() && false;
};
canvas.addEventListener('DOMMouseScroll',handleScroll,false); // For Firefox
canvas.addEventListener('mousewheel',handleScroll,false);     // Everyone else

Tôi có thể sử dụng mã nào để có cùng giá trị 'delta' cho cùng số lượng bánh xe chuột lăn trên Chrome v10 / 11, Firefox v4, Safari v5, Opera v11 và IE9?

Câu hỏi này có liên quan, nhưng không có câu trả lời tốt.

Chỉnh sửa : Điều tra thêm cho thấy một sự kiện cuộn 'lên' là:

                  | evt.wheelDelta | evt.detail
------------------ + ---------------- + ------------
  Safari v5 / Win7 | 120 | 0
  Safari v5 / OS X | 120 | 0
  Safari v7 / OS X | 12 | 0
 Chrome v11 / Win7 | 120 | 0
 Chrome v37 / Win7 | 120 | 0
 Chrome v11 / OS X | 3 (!) | 0 (có thể sai)
 Chrome v37 / OS X | 120 | 0
        IE9 / Win7 | 120 | chưa xác định
  Opera v11 / OS X | 40 | -1
  Opera v24 / OS X | 120 | 0
  Opera v11 / Win7 | 120 | -3
 Firefox v4 / Win7 | không xác định | -3
 Firefox v4 / OS X | không xác định | -1
Firefox v30 / OS X | không xác định | -1

Hơn nữa, sử dụng bàn di chuột MacBook trên OS X cho kết quả khác nhau ngay cả khi di chuyển chậm:

• Trên Safari và Chrome, wheelDeltagiá trị là 3 thay vì 120 cho bánh xe chuột.
• Trên Firefox , detailthông thường 2, đôi khi 1, nhưng khi cuộn rất chậm, KHÔNG CÓ SỰ KIỆN XỬ LÝ NÀO TẤT CẢ .

Vì vậy, câu hỏi là:

Cách tốt nhất để phân biệt hành vi này (lý tưởng mà không có bất kỳ tác nhân người dùng hoặc hệ điều hành nào đánh hơi) là gì?

Chỉnh sửa tháng 9 năm 2014

Cho rằng:

• Các phiên bản khác nhau của cùng một trình duyệt trên OS X đã mang lại các giá trị khác nhau trong quá khứ và có thể làm như vậy trong tương lai và điều đó
• Sử dụng trackpad trên OS X mang lại hiệu ứng rất giống với sử dụng bánh xe chuột, nhưng mang lại các giá trị sự kiện rất khác nhau và tuy nhiên, sự khác biệt của thiết bị không thể được phát hiện bởi JS

Tôi chỉ có thể khuyên bạn nên sử dụng mã đếm dựa trên ký hiệu đơn giản này:

var handleScroll = function(evt){
  if (!evt) evt = event;
  var direction = (evt.detail<0 || evt.wheelDelta>0) ? 1 : -1;
  // Use the value as you will
};
someEl.addEventListener('DOMMouseScroll',handleScroll,false); // for Firefox
someEl.addEventListener('mousewheel',    handleScroll,false); // for everyone else

Nỗ lực ban đầu để được chính xác sau.

Đây là nỗ lực đầu tiên của tôi tại một kịch bản để bình thường hóa các giá trị. Nó có hai lỗ hổng trên OS X: Firefox trên OS X sẽ tạo ra các giá trị 1/3 so với những gì chúng cần và Chrome trên OS X sẽ tạo ra các giá trị 1/40 so với những gì chúng cần.

// Returns +1 for a single wheel roll 'up', -1 for a single roll 'down'
var wheelDistance = function(evt){
  if (!evt) evt = event;
  var w=evt.wheelDelta, d=evt.detail;
  if (d){
    if (w) return w/d/40*d>0?1:-1; // Opera
    else return -d/3;              // Firefox;         TODO: do not /3 for OS X
  } else return w/120;             // IE/Safari/Chrome TODO: /3 for Chrome OS X
};

Bạn có thể kiểm tra mã này trên trình duyệt của riêng mình tại đây: http://phrogz.net/JS/wheeldelta.html

Đề xuất phát hiện và cải thiện hành vi trên Firefox và Chrome trên OS X đều được chào đón.

Chỉnh sửa : Một đề xuất từ ​​@Tom là chỉ cần đếm mỗi cuộc gọi sự kiện là một lần di chuyển, sử dụng dấu của khoảng cách để điều chỉnh nó. Điều này sẽ không mang lại kết quả tuyệt vời khi cuộn trơn tru / tăng tốc trên OS X, cũng không xử lý các trường hợp hoàn hảo khi bánh xe chuột được di chuyển rất nhanh (ví dụ wheelDelta240), nhưng những điều này xảy ra không thường xuyên. Mã này hiện là kỹ thuật được đề xuất hiển thị ở đầu câu trả lời này, vì các lý do được mô tả ở đó.

Đây là nỗ lực điên rồ của tôi để tạo ra một trình duyệt chéo mạch lạc và chuẩn hóa trình duyệt chéo (-1 <= delta <= 1):

var o = e.originalEvent,
    d = o.detail, w = o.wheelDelta,
    n = 225, n1 = n-1;

// Normalize delta
d = d ? w && (f = w/d) ? d/f : -d/1.35 : w/120;
// Quadratic scale if |d| > 1
d = d < 1 ? d < -1 ? (-Math.pow(d, 2) - n1) / n : d : (Math.pow(d, 2) + n1) / n;
// Delta *should* not be greater than 2...
e.delta = Math.min(Math.max(d / 2, -1), 1);

Điều này hoàn toàn theo kinh nghiệm nhưng hoạt động khá tốt trên Safari 6, FF 16, Opera 12 (OS X) và IE 7 trên XP

Bạn bè của chúng tôi tại Facebook đưa ra một giải pháp tuyệt vời cho vấn đề này.

Tôi đã thử nghiệm trên bảng dữ liệu mà tôi đang xây dựng bằng React và nó cuộn như bơ!

Giải pháp này hoạt động trên nhiều trình duyệt khác nhau, trên Windows / Mac và cả hai đều sử dụng trackpad / chuột.

// Reasonable defaults
var PIXEL_STEP  = 10;
var LINE_HEIGHT = 40;
var PAGE_HEIGHT = 800;

function normalizeWheel(/*object*/ event) /*object*/ {
  var sX = 0, sY = 0,       // spinX, spinY
      pX = 0, pY = 0;       // pixelX, pixelY

  // Legacy
  if ('detail'      in event) { sY = event.detail; }
  if ('wheelDelta'  in event) { sY = -event.wheelDelta / 120; }
  if ('wheelDeltaY' in event) { sY = -event.wheelDeltaY / 120; }
  if ('wheelDeltaX' in event) { sX = -event.wheelDeltaX / 120; }

  // side scrolling on FF with DOMMouseScroll
  if ( 'axis' in event && event.axis === event.HORIZONTAL_AXIS ) {
    sX = sY;
    sY = 0;
  }

  pX = sX * PIXEL_STEP;
  pY = sY * PIXEL_STEP;

  if ('deltaY' in event) { pY = event.deltaY; }
  if ('deltaX' in event) { pX = event.deltaX; }

  if ((pX || pY) && event.deltaMode) {
    if (event.deltaMode == 1) {          // delta in LINE units
      pX *= LINE_HEIGHT;
      pY *= LINE_HEIGHT;
    } else {                             // delta in PAGE units
      pX *= PAGE_HEIGHT;
      pY *= PAGE_HEIGHT;
    }
  }

  // Fall-back if spin cannot be determined
  if (pX && !sX) { sX = (pX < 1) ? -1 : 1; }
  if (pY && !sY) { sY = (pY < 1) ? -1 : 1; }

  return { spinX  : sX,
           spinY  : sY,
           pixelX : pX,
           pixelY : pY };
}

Mã nguồn có thể được tìm thấy ở đây: https://github.com/facebook/fixed-data-table/blob/master/src/vendor_upstream/dom/n normalizeWheel.js

Tôi đã tạo một bảng với các giá trị khác nhau được trả về bởi các sự kiện / trình duyệt khác nhau, có tính đến wheel sự kiện DOM3 mà một số trình duyệt đã hỗ trợ (bảng bên dưới).

Dựa vào đó tôi đã thực hiện chức năng này để bình thường hóa tốc độ:

http://jsfiddle.net/mfe8J/1/

function normalizeWheelSpeed(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);
    }
    return normalized;
}

Bảng cho mousewheel, wheelvà DOMMouseScrollcác sự kiện:

| mousewheel        | Chrome (win) | Chrome (mac) | Firefox (win) | Firefox (mac) | Safari 7 (mac) | Opera 22 (mac) | Opera 22 (win) | IE11      | IE 9 & 10   | IE 7 & 8  |
|-------------------|--------------|--------------|---------------|---------------|----------------|----------------|----------------|-----------|-------------|-----------|
| event.detail      | 0            | 0            | -             | -             | 0              | 0              | 0              | 0         | 0           | undefined |
| event.wheelDelta  | 120          | 120          | -             | -             | 12             | 120            | 120            | 120       | 120         | 120       |
| event.wheelDeltaY | 120          | 120          | -             | -             | 12             | 120            | 120            | undefined | undefined   | undefined |
| event.wheelDeltaX | 0            | 0            | -             | -             | 0              | 0              | 0              | undefined | undefined   | undefined |
| event.delta       | undefined    | undefined    | -             | -             | undefined      | undefined      | undefined      | undefined | undefined   | undefined |
| event.deltaY      | -100         | -4           | -             | -             | undefined      | -4             | -100           | undefined | undefined   | undefined |
| event.deltaX      | 0            | 0            | -             | -             | undefined      | 0              | 0              | undefined | undefined   | undefined |
|                   |              |              |               |               |                |                |                |           |             |           |
| wheel             | Chrome (win) | Chrome (mac) | Firefox (win) | Firefox (mac) | Safari 7 (mac) | Opera 22 (mac) | Opera 22 (win) | IE11      | IE 10 & 9   | IE 7 & 8  |
| event.detail      | 0            | 0            | 0             | 0             | -              | 0              | 0              | 0         | 0           | -         |
| event.wheelDelta  | 120          | 120          | undefined     | undefined     | -              | 120            | 120            | undefined | undefined   | -         |
| event.wheelDeltaY | 120          | 120          | undefined     | undefined     | -              | 120            | 120            | undefined | undefined   | -         |
| event.wheelDeltaX | 0            | 0            | undefined     | undefined     | -              | 0              | 0              | undefined | undefined   | -         |
| event.delta       | undefined    | undefined    | undefined     | undefined     | -              | undefined      | undefined      | undefined | undefined   | -         |
| event.deltaY      | -100         | -4           | -3            | -0,1          | -              | -4             | -100           | -99,56    | -68,4 | -53 | -         |
| event.deltaX      | 0            | 0            | 0             | 0             | -              | 0              | 0              | 0         | 0           | -         |
|                   |              |              |               |               |                |                |                |           |             |           |
|                   |              |              |               |               |                |                |                |           |             |           |
| DOMMouseScroll    |              |              | Firefox (win) | Firefox (mac) |                |                |                |           |             |           |
| event.detail      |              |              | -3            | -1            |                |                |                |           |             |           |
| event.wheelDelta  |              |              | undefined     | undefined     |                |                |                |           |             |           |
| event.wheelDeltaY |              |              | undefined     | undefined     |                |                |                |           |             |           |
| event.wheelDeltaX |              |              | undefined     | undefined     |                |                |                |           |             |           |
| event.delta       |              |              | undefined     | undefined     |                |                |                |           |             |           |
| event.deltaY      |              |              | undefined     | undefined     |                |                |                |           |             |           |
| event.deltaX      |              |              | undefined     | undefined     |                |                |                |           |             |           |

Một giải pháp độc lập ít nhiều ...

Điều này không mất thời gian giữa các sự kiện vào tài khoản mặc dù. Một số trình duyệt dường như luôn luôn chạy các sự kiện với cùng một delta và chỉ kích hoạt chúng nhanh hơn khi cuộn nhanh. Những người khác làm thay đổi đồng bằng. Người ta có thể tưởng tượng một bộ chuẩn hóa thích ứng cần có thời gian, nhưng điều đó có phần liên quan và khó sử dụng.

Làm việc có sẵn ở đây: jsbin / iqafek / 2

var normalizeWheelDelta = function() {
  // Keep a distribution of observed values, and scale by the
  // 33rd percentile.
  var distribution = [], done = null, scale = 30;
  return function(n) {
    // Zeroes don't count.
    if (n == 0) return n;
    // After 500 samples, we stop sampling and keep current factor.
    if (done != null) return n * done;
    var abs = Math.abs(n);
    // Insert value (sorted in ascending order).
    outer: do { // Just used for break goto
      for (var i = 0; i < distribution.length; ++i) {
        if (abs <= distribution[i]) {
          distribution.splice(i, 0, abs);
          break outer;
        }
      }
      distribution.push(abs);
    } while (false);
    // Factor is scale divided by 33rd percentile.
    var factor = scale / distribution[Math.floor(distribution.length / 3)];
    if (distribution.length == 500) done = factor;
    return n * factor;
  };
}();

// Usual boilerplate scroll-wheel incompatibility plaster.

var div = document.getElementById("thing");
div.addEventListener("DOMMouseScroll", grabScroll, false);
div.addEventListener("mousewheel", grabScroll, false);

function grabScroll(e) {
  var dx = -(e.wheelDeltaX || 0), dy = -(e.wheelDeltaY || e.wheelDelta || 0);
  if (e.detail != null) {
    if (e.axis == e.HORIZONTAL_AXIS) dx = e.detail;
    else if (e.axis == e.VERTICAL_AXIS) dy = e.detail;
  }
  if (dx) {
    var ndx = Math.round(normalizeWheelDelta(dx));
    if (!ndx) ndx = dx > 0 ? 1 : -1;
    div.scrollLeft += ndx;
  }
  if (dy) {
    var ndy = Math.round(normalizeWheelDelta(dy));
    if (!ndy) ndy = dy > 0 ? 1 : -1;
    div.scrollTop += ndy;
  }
  if (dx || dy) { e.preventDefault(); e.stopPropagation(); }
}

Giải pháp đơn giản và hiệu quả:

private normalizeDelta(wheelEvent: WheelEvent):number {
    var delta = 0;
    var wheelDelta = wheelEvent.wheelDelta;
    var deltaY = wheelEvent.deltaY;
    // CHROME WIN/MAC | SAFARI 7 MAC | OPERA WIN/MAC | EDGE
    if (wheelDelta) {
        delta = -wheelDelta / 120; 
    }
    // FIREFOX WIN / MAC | IE
    if(deltaY) {
        deltaY > 0 ? delta = 1 : delta = -1;
    }
    return delta;
}

Để được hỗ trợ thu phóng trên các thiết bị cảm ứng, hãy đăng ký các sự kiện cử chỉ, cử chỉ và cử chỉ và sử dụng thuộc tính event.scale. Bạn có thể xem mã ví dụ cho việc này.

Đối với Firefox 17, onwheelsự kiện này được lên kế hoạch để được hỗ trợ bởi các phiên bản dành cho máy tính để bàn và thiết bị di động (theo tài liệu MDN trên onwheel ). Ngoài ra đối với Firefox có lẽ MozMousePixelScrollsự kiện cụ thể của Gecko là hữu ích (mặc dù có lẽ hiện tại điều này không được chấp nhận vì sự kiện DOMMouseWheel hiện không được chấp nhận trong Firefox).

Đối với Windows, trình điều khiển dường như tạo ra các sự kiện WM_MOUSEWHEEL, WM_MOUSEHWHEEL (và có thể là sự kiện WM_GESTURE cho panpad cảm ứng?). Điều đó sẽ giải thích tại sao Windows hoặc trình duyệt dường như không bình thường hóa các giá trị sự kiện của con lăn chuột (và có thể có nghĩa là bạn không thể viết mã đáng tin cậy để bình thường hóa các giá trị).

Đối với hỗ trợ sự kiện onwheel( không phải onmousewheel) trong Internet Explorer cho IE9 và IE10, bạn cũng có thể sử dụng sự kiện tiêu chuẩn W3C onwheel . Tuy nhiên, một notch có thể là một giá trị khác với 120 (ví dụ một notch trở thành 111 (thay vì -120) trên chuột của tôi bằng trang thử nghiệm này ). Tôi đã viết một bài viết khác với các chi tiết khác sự kiện bánh xe có thể có liên quan.

Về cơ bản trong thử nghiệm riêng của tôi cho các sự kiện bánh xe (tôi đang cố gắng bình thường hóa các giá trị để cuộn), tôi đã thấy rằng tôi nhận được các giá trị khác nhau cho HĐH, nhà cung cấp trình duyệt, phiên bản trình duyệt, loại sự kiện và thiết bị (chuột Microsoft nghiêng, cử chỉ touchpad của máy tính xách tay , bàn di chuột máy tính xách tay với cuộn cuộn, chuột ma thuật Apple, cuộn cuộn chuột hùng mạnh của Apple, bàn di chuột Mac, v.v.).

Và phải bỏ qua nhiều hiệu ứng phụ từ cấu hình trình duyệt (ví dụ: mouse mouse.enable_pixel_scrolling, chrome --scroll-pixel = 150), cài đặt trình điều khiển (ví dụ: bàn di chuột Synaptics) và cấu hình HĐH (cài đặt chuột Windows, tùy chọn chuột OSX, Cài đặt nút X.org).

Đây là vấn đề tôi đã đấu tranh trong vài giờ hôm nay và không phải là lần đầu tiên :(

Tôi đã cố gắng tổng hợp các giá trị qua một "thao tác vuốt" và xem các trình duyệt báo cáo các giá trị khác nhau như thế nào và chúng khác nhau rất nhiều, với thứ tự báo cáo Safari có số lượng lớn hơn trên hầu hết tất cả các nền tảng, Chrome báo cáo khá nhiều (như gấp 3 lần ) so với firefox, firefox được cân bằng trong thời gian dài nhưng khá khác biệt giữa các nền tảng trên các chuyển động nhỏ (trên Ubuntu gnome, gần như chỉ +3 hoặc -3, có vẻ như nó tổng hợp các sự kiện nhỏ hơn và sau đó gửi "+3" lớn)

Các giải pháp hiện tại được tìm thấy ngay bây giờ là ba:

1. "Chỉ sử dụng dấu hiệu" đã được đề cập sẽ giết chết mọi loại gia tốc
2. Đánh hơi trình duyệt lên phiên bản nhỏ và nền tảng và điều chỉnh đúng
3. Qooxdoo gần đây đã triển khai một thuật toán tự thích ứng, về cơ bản cố gắng mở rộng quy mô dựa trên giá trị tối thiểu và tối đa nhận được cho đến nay.

Ý tưởng trong Qooxdoo là tốt, và hoạt động, và là giải pháp duy nhất tôi hiện thấy là trình duyệt chéo hoàn toàn nhất quán.

Thật không may, nó có xu hướng tái chuẩn hóa cũng tăng tốc. Nếu bạn thử nó (trong bản demo của họ) và cuộn lên xuống ở tốc độ tối đa trong một thời gian, bạn sẽ nhận thấy rằng cuộn cực nhanh hoặc cực chậm về cơ bản tạo ra gần như cùng một chuyển động. Ngược lại nếu bạn tải lại trang và chỉ vuốt rất chậm, bạn sẽ nhận thấy rằng nó sẽ cuộn khá nhanh ".

Điều này gây khó chịu cho một người dùng Mac (như tôi) được sử dụng để đưa ra các thao tác cuộn mạnh mẽ trên bàn di chuột và mong muốn được lên trên cùng hoặc dưới cùng của điều được cuộn.

Thậm chí, vì nó giảm tốc độ chuột dựa trên giá trị tối đa thu được, người dùng của bạn càng cố gắng tăng tốc, nó sẽ càng chậm lại, trong khi người dùng "cuộn chậm" sẽ trải nghiệm tốc độ khá nhanh.

Điều này làm cho giải pháp này (nếu không xuất sắc) thực hiện tốt hơn một chút giải pháp 1.

Tôi đã chuyển giải pháp cho plugin mousewheel jquery: http://jsfiddle.net/SimoneGianni/pXzVv/

Nếu bạn chơi với nó một lúc, bạn sẽ thấy rằng bạn sẽ bắt đầu nhận được kết quả khá đồng nhất, nhưng bạn cũng sẽ nhận thấy rằng nó có xu hướng + 1 / -1 giá trị khá nhanh.

Bây giờ tôi đang làm việc để tăng cường nó để phát hiện các đỉnh tốt hơn, để chúng không gửi mọi thứ "ngoài quy mô". Cũng thật tốt khi có được giá trị float giữa 0 và 1 làm giá trị delta, do đó có đầu ra kết hợp.

Chắc chắn không có cách đơn giản nào để bình thường hóa trên tất cả người dùng trong tất cả các hệ điều hành trong tất cả các trình duyệt.

Nó còn tệ hơn các biến thể được liệt kê của bạn - trên thiết lập WindowsXP + Firefox3.6 của tôi, con lăn chuột của tôi thực hiện 6 lần di chuyển một lần - có lẽ vì ở đâu đó tôi đã quên tôi đã tăng tốc bánh xe chuột, trong hệ điều hành hoặc ở đâu đó trong khoảng: cấu hình

Tuy nhiên, tôi đang xử lý một vấn đề tương tự (với một ứng dụng tương tự btw, nhưng không phải là canvas) và nó xảy ra với tôi chỉ bằng cách sử dụng dấu delta là +1 / -1 và đo theo thời gian lần cuối nó bắn, bạn sẽ có tốc độ tăng tốc, tức là. nếu ai đó cuộn một lần so với vài lần trong một vài khoảnh khắc (mà tôi sẽ đặt cược là cách google maps thực hiện nó).

Khái niệm này dường như hoạt động tốt trong các thử nghiệm của tôi, chỉ cần làm cho bất cứ điều gì dưới 100ms thêm vào khả năng tăng tốc.

var onMouseWheel = function(e) {
    e = e.originalEvent;
    var delta = e.wheelDelta>0||e.detail<0?1:-1;
    alert(delta);
}
$("body").bind("mousewheel DOMMouseScroll", onMouseWheel);