Menormalkan kecepatan roda mouse di browser

Untuk pertanyaan lain, saya menulis jawaban ini , termasuk kode sampel ini .

Dalam kode itu saya menggunakan roda mouse untuk memperbesar / memperkecil Kanvas HTML5. Saya menemukan beberapa kode yang menormalkan perbedaan kecepatan antara Chrome dan Firefox. Namun, penanganan zoom di Safari jauh, jauh lebih cepat daripada di keduanya.

Berikut kode yang saya miliki saat ini:

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

Kode apa yang dapat saya gunakan untuk mendapatkan nilai 'delta' yang sama untuk jumlah roda mouse yang sama di Chrome v10 / 11, Firefox v4, Safari v5, Opera v11 dan IE9?

Pertanyaan ini terkait, tetapi tidak memiliki jawaban yang baik.

Sunting : Investigasi lebih lanjut menunjukkan bahwa satu acara gulir 'atas' adalah:

                  | 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 (mungkin salah)
 Chrome v37 / OS X | 120 | 0
        IE9 / Win7 | 120 | tidak terdefinisi
  Opera v11 / OS X | 40 | -1
  Opera v24 / OS X | 120 | 0
  Opera v11 / Win7 | 120 | -3
 Firefox v4 / Win7 | undefined | -3
 Firefox v4 / OS X | undefined | -1
Firefox v30 / OS X | undefined | -1

Selanjutnya, menggunakan trackpad MacBook pada OS X memberikan hasil yang berbeda bahkan ketika bergerak lambat:

• Pada Safari dan Chrome, wheelDeltanilai 3 bukannya 120 untuk roda mouse.
• Pada Firefox detailbiasanya 2, kadang-kadang 1, tetapi ketika menggulir sangat lambat TIDAK ADA PENANGANAN ACARA YANG SAMA SEKALI .

Jadi pertanyaannya adalah:

Apa cara terbaik untuk membedakan perilaku ini (idealnya tanpa agen pengguna atau OS sniffing)?

Edit September 2014

Mengingat bahwa:

• Versi berbeda dari browser yang sama pada OS X telah menghasilkan nilai yang berbeda di masa lalu, dan dapat melakukannya di masa depan, dan itu
• Menggunakan trackpad pada OS X menghasilkan efek yang sangat mirip dengan menggunakan roda mouse, namun memberikan nilai peristiwa yang sangat berbeda , namun perbedaan perangkat tidak dapat dideteksi oleh JS

... Saya hanya dapat merekomendasikan menggunakan kode penghitungan berbasis tanda yang sederhana ini:

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

Upaya asli untuk menjadi benar mengikuti.

Ini adalah upaya pertama saya pada skrip untuk menormalkan nilai-nilai Ini memiliki dua kelemahan pada OS X: Firefox pada OS X akan menghasilkan nilai 1/3 apa yang seharusnya, dan Chrome pada OS X akan menghasilkan nilai 1/40 seperti apa yang seharusnya.

// 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
};

Anda dapat menguji kode ini di browser Anda sendiri di sini: http://phrogz.net/JS/wheeldelta.html

Saran untuk mendeteksi dan meningkatkan perilaku di Firefox dan Chrome di OS X dipersilakan.

Sunting : Satu saran dari @Tom adalah cukup menghitung setiap panggilan acara sebagai satu gerakan, menggunakan tanda jarak untuk menyesuaikannya. Ini tidak akan memberikan hasil yang luar biasa di bawah pengguliran yang mulus / dipercepat pada OS X, atau menangani kasus dengan sempurna ketika roda mouse digerakkan dengan sangat cepat (mis. wheelDelta240), tetapi ini jarang terjadi. Kode ini sekarang merupakan teknik yang direkomendasikan di bagian atas jawaban ini, untuk alasan yang dijelaskan di sana.

Berikut ini adalah upaya gila saya untuk menghasilkan delta lintas browser yang koheren dan normal (-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);

Ini benar-benar empiris tetapi berfungsi cukup baik pada Safari 6, FF 16, Opera 12 (OS X) dan IE 7 di XP

Teman-teman kami di Facebook mengumpulkan solusi hebat untuk masalah ini.

Saya telah menguji pada tabel data yang saya bangun menggunakan Bereaksi dan gulungan itu seperti mentega!

Solusi ini berfungsi pada berbagai browser, pada Windows / Mac, dan keduanya menggunakan trackpad / mouse.

// 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 };
}

Kode sumber dapat ditemukan di sini: https://github.com/facebook/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js

Saya membuat tabel dengan nilai berbeda yang dikembalikan oleh berbagai peristiwa / browser, dengan mempertimbangkan wheel peristiwa DOM3 yang sudah didukung oleh beberapa browser (tabel di bawah).

Berdasarkan itu saya membuat fungsi ini untuk menormalkan kecepatan:

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;
}

Tabel untuk mousewheel, wheeldan DOMMouseScrollacara:

| 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     |                |                |                |           |             |           |

Solusi lain yang kurang lebih lengkap ...

Ini tidak membutuhkan waktu antar peristiwa. Beberapa peramban tampaknya selalu memecat acara dengan delta yang sama, dan memecatnya lebih cepat saat menggulir dengan cepat. Yang lain benar-benar memvariasikan delta-delta. Orang dapat membayangkan normalizer adaptif yang membutuhkan waktu, tetapi itu akan agak rumit dan canggung untuk digunakan.

Bekerja tersedia di sini: 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(); }
}

Solusi sederhana dan berhasil:

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;
}

Untuk dukungan zoom pada perangkat sentuh, daftar untuk gesturestart, gesturechange, dan gestureendend event dan gunakan properti event.scale. Anda dapat melihat kode contoh untuk ini.

Untuk Firefox 17 onwheelacara ini direncanakan akan didukung oleh versi desktop dan seluler (sesuai MDN docs onwheel ). Juga untuk Firefox mungkin MozMousePixelScrollacara spesifik Gecko berguna (walaupun mungkin ini sekarang sudah tidak digunakan lagi karena acara DOMMouseWheel sekarang sudah tidak digunakan lagi di Firefox).

Untuk Windows, driver itu sendiri tampaknya menghasilkan acara WM_MOUSEWHEEL, WM_MOUSEHWHEEL (dan mungkin acara WM_GESTURE untuk panning touchpad?). Itu akan menjelaskan mengapa Windows atau browser tampaknya tidak menormalkan nilai peristiwa roda mouse itu sendiri (dan mungkin berarti Anda tidak dapat menulis kode yang dapat diandalkan untuk menormalkan nilai-nilai).

Untuk onwheel( bukan onmousewheel) dukungan acara di Internet Explorer untuk IE9 dan IE10, Anda juga dapat menggunakan acara standar W3C onwheel . Namun satu takik dapat menjadi nilai yang berbeda dari 120 (misalnya takik tunggal menjadi 111 (bukannya -120) pada mouse saya menggunakan halaman pengujian ini ). Saya menulis artikel lain dengan detail lainnya yang mungkin relevan.

Pada dasarnya dalam pengujian saya sendiri untuk peristiwa roda (saya mencoba untuk menormalkan nilai-nilai untuk menggulir), saya telah menemukan bahwa saya mendapatkan berbagai nilai untuk OS, vendor browser, versi browser, jenis acara, dan perangkat (mouse Microsoft tiltwheel, gerakan touchpad laptop) , laptop touchpad dengan scrollzone, mouse ajaib Apple, scrollball mouse perkasa Apple, touchpad Mac, dll.).

Dan harus mengabaikan berbagai efek samping dari konfigurasi browser (mis. Firefox mousewheel.enable_pixel_scrolling, chrome --scroll-piksel = 150), pengaturan driver (mis. Touchpad Synaptics), dan konfigurasi OS (pengaturan mouse Windows, preferensi Mouse OSX, Pengaturan tombol X.org).

Ini adalah masalah yang telah saya perjuangkan selama beberapa jam hari ini, dan bukan untuk pertama kalinya :(

Saya telah mencoba untuk meringkas nilai lebih dari "gesek" dan melihat bagaimana berbagai browser melaporkan nilai, dan mereka sangat bervariasi, dengan Safari melaporkan urutan angka yang lebih besar di hampir semua platform, Chrome melaporkan lebih banyak (seperti 3 kali lebih banyak ) daripada firefox, firefox diseimbangkan dalam jangka panjang tetapi sangat berbeda di antara platform pada gerakan kecil (di Ubuntu gnome, hampir hanya +3 atau -3, tampaknya seperti meringkas kejadian yang lebih kecil dan kemudian mengirim "+3" besar)

Solusi saat ini yang ditemukan saat ini adalah tiga:

1. Yang sudah disebutkan "hanya menggunakan tanda" yang membunuh segala jenis akselerasi
2. Mengendus browser hingga versi kecil dan platform, dan sesuaikan dengan benar
3. Qooxdoo baru-baru ini menerapkan algoritma adaptasi diri, yang pada dasarnya mencoba untuk skala delta berdasarkan nilai minimum dan maksimum yang diterima sejauh ini.

Gagasan di Qooxdoo bagus, dan berfungsi, dan merupakan satu-satunya solusi yang saat ini saya temukan sebagai browser lintas yang sepenuhnya konsisten.

Sayangnya itu cenderung merenormalisasi juga akselerasi. Jika Anda mencobanya (dalam demo mereka), dan gulir ke atas dan ke bawah dengan kecepatan maksimum untuk sementara waktu, Anda akan melihat bahwa menggulir sangat cepat atau sangat lambat pada dasarnya menghasilkan jumlah gerakan yang hampir sama. Sebaliknya jika Anda memuat ulang halaman dan hanya menggesek sangat lambat, Anda akan melihat bahwa itu akan menggulir dengan cukup cepat ".

Ini membuat frustasi bagi pengguna Mac (seperti saya) yang digunakan untuk memberikan gesekan gulir penuh pada touchpad dan berharap untuk mendapatkan bagian atas atau bawah dari hal yang digulir.

Terlebih lagi, karena mengurangi kecepatan mouse berdasarkan pada nilai maksimum yang diperoleh, semakin banyak pengguna Anda mencoba untuk mempercepatnya, semakin itu akan memperlambat, sementara pengguna "gulir lambat" akan mengalami kecepatan yang cukup cepat.

Ini membuat solusi ini (jika tidak brilian) implementasi yang lebih baik dari solusi 1.

Saya porting solusi ke plugin jquery mousewheel: http://jsfiddle.net/SimoneGianni/pXzVv/

Jika Anda bermain dengannya sebentar, Anda akan melihat bahwa Anda akan mulai mendapatkan hasil yang cukup homogen, tetapi Anda juga akan melihat bahwa itu cenderung nilai +1 + -1 cukup cepat.

Saya sekarang sedang berusaha meningkatkannya untuk mendeteksi puncak yang lebih baik, sehingga mereka tidak mengirim semuanya "di luar skala". Akan menyenangkan juga mendapatkan nilai float antara 0 dan 1 sebagai nilai delta, sehingga ada output yang koheren.

Jelas tidak ada cara sederhana untuk menormalkan semua pengguna di semua OS di semua browser.

Ini menjadi lebih buruk daripada variasi yang terdaftar - pada pengaturan WindowsXP + Firefox3.6 saya roda mouse saya melakukan 6 per satu-takik gulir - mungkin karena di suatu tempat saya lupa saya mempercepat roda mouse, baik di OS atau di suatu tempat di sekitar: konfigurasi

Namun saya sedang mengerjakan masalah yang sama (dengan btw aplikasi serupa, tetapi non-kanvas) dan itu terjadi kepada saya dengan hanya menggunakan tanda delta +1 / -1 dan mengukur dari waktu ke waktu terakhir kali dipecat, Anda akan memiliki tingkat percepatan, yaitu. jika seseorang menggulir satu kali vs beberapa kali dalam beberapa saat (yang saya yakin adalah bagaimana google maps melakukannya).

Konsepnya tampaknya bekerja dengan baik dalam pengujian saya, hanya membuat apa pun yang kurang dari 100 ms menambah akselerasi.

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