Normalize tarayıcılarda hızlı fare tekerleği

SORU

3 NİSAN 2011, Pazar

Normalize tarayıcılarda hızlı fare tekerleği

a different question this sample code dahil this answer, besteledim.

Bu kodu fare tekerleğini HTML5 Tuval/out yakınlaştırma için kullanıyorum. Chrome ve Firefox arasındaki hız farklılıkları normalleştirir bazı kod buldum. Ancak, Safari zoom kullanımı çok, çok hızlı ya da daha.

İşte ben şu anda sahip kodu:

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

Ne kod aynı kullanın 'delta' fare tekerleği Chrome üzerinde çalışırken aynı miktarda değer v10/11, Firefox v4, v5, Opera v11 ve Internet Explorer 9 Safari miyim?

This question ile ilgili, ama iyi bir yanıtı vardır.

Edit: Daha fazla araştırma bir olay'':. Yukarı kaydır gösteriyor

                  | 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      (possibly wrong)
 Chrome v37/OS X  |       120      |      0
        IE9/Win7  |       120      |  undefined
  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

Ayrıca, OS X MacBook iz kullanıyor yavaş hareket bile farklı sonuçlar verir:

Safari ve Chrome üzerinde, wheelDelta fare tekerleği için 120 yerine 3 değerini alır.
Firefox detail genellikle 2 bazen çok yavaş kaydırma 1 amaHİÇBİR ETKİNLİKTE TÜM YANGINLARI İŞLEYİCİSİ.

Şimdi soru şu:

Bu davranış, (ideal olarak herhangi bir kullanıcı Aracısı veya OS koklama olmadan) ayırt etmek için en iyi yolu nedir?

CEVAP

4 NİSAN 2011, PAZARTESİ

Eylül 2014 Düzenleyin

Verilen:

İşletim sistemi üzerinde aynı tarayıcının farklı sürümleri X geçmişte farklı değerler vermiştir ve gelecekte de olabilir
OS X iz kullanıyor çok benzer veriretkilerfare tekerleğini kullanarak, henüz çok farklı bir olay verirdeğerlercihaz fark edemiyor JS tarafından tespit edilmesi henüz

...Sadece bu basit kullanmanızı tavsiye edebilirim, oturum tabanlı sayma kodu:

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

Doğru orijinal girişimi izler.

İşte bu değerleri normale döndürmek için bir komut dosyası benim ilk denemem. OS X üzerinde iki kusurları vardır: X ve OS Chrome gereken değerler 1/3 üretecek X olması gereken değerleri 1/40 üretecek işletim sistemi üzerinde Firefox.

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

Kendi tarayıcınızda bu kod burada test edebilirsiniz: http://phrogz.net/JS/wheeldelta.html

OS X ve Firefox ve Chrome üzerinde davranış algılama geliştirmek için önerilerini bekliyoruz.

Edit: @Bir öneri Tom sadece her olay, tek bir hareket olarak arama sayısı, mesafe işareti ayarlamak için kullanıyor. Bu olmaz ver harika sonuçlar altında düz/hızlandırılmış kaydırma OS X, ne de ele mükemmel durumda ne zaman fare tekerleği hareket ediyor çok hızlı (örneğin wheelDelta 240), ama bu nadiren olur. Bu kodu şimdi önerilen yöntem bu cevap üst kısmında, sebep orada tarif için.

Bunu Paylaş: