Tarayıcılar arasında fare tekerleği hızını normalleştirme

149

İçin farklı bir soruya ben oluşan bu cevabı da dahil olmak üzere, bu örnek kod .

Bu kodda, bir HTML5 Canvas'ı yakınlaştırmak / uzaklaştırmak için fare tekerleğini kullanıyorum. Chrome ve Firefox arasındaki hız farklılıklarını normalleştiren bazı kodlar buldum. Bununla birlikte, Safari'deki yakınlaştırma işlemi, her ikisinden de çok çok daha hızlıdır.

İşte şu anda sahip olduğum kod:

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

Chrome v10 / 11, Firefox v4, Safari v5, Opera v11 ve IE9'da aynı miktarda fare tekerleği için aynı 'delta' değerini elde etmek için hangi kodu kullanabilirim?

Bu soru ilişkilidir, ancak iyi bir cevabı yoktur.

Düzenleme : Daha fazla araştırma, bir kaydırma etkinliğinin 'yukarı' olduğunu gösterir:

                  | 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 (muhtemelen yanlış)
 Chrome v37 / OS X | 120 | 0
        IE9 / Win7 | 120 | Tanımsız
  Opera v11 / OS X | 40 | -1
  Opera v24 / OS X | 120 | 0
  Opera v11 / Win7 | 120 | -3
 Firefox v4 / Win7 | tanımsız | -3
 Firefox v4 / OS X | tanımsız | -1
Firefox v30 / OS X | tanımsız | -1

Ayrıca, OS X'te MacBook izleme dörtgenini kullanmak, yavaş hareket ederken bile farklı sonuçlar verir:

  • Safari ve Chrome'da, wheelDeltafare tekerleği için 120 yerine 3 değeridir.
  • Firefox'ta detailgenellikle 2, bazen 1, ancak çok yavaş kaydırıldığında OLAY İŞLEMCİSİ YANGIN YOKTUR .

Yani soru şu:

Bu davranışı ayırt etmenin en iyi yolu nedir (ideal olarak herhangi bir kullanıcı aracısı veya işletim sistemi koklama olmadan)?

javascript  mousewheel 
— Phrogz
kaynak
Üzgünüm, sorumu sildim. Şu anda bir cevap yazıyorum. Daha ileri gitmeden önce, Mac OS X'te Safari'de gezinmekten mi bahsediyorsunuz? Biraz kaydırdığınızda, biraz kayıyor, ancak sabit bir hızı korursunuz, giderek daha hızlı mı oluyor?
— Blender
@Blender Şu anda OS X üzerinde test ediyorum ve evet, Safari, Chrome'dan yaklaşık 20 kat daha hızlı yakınlaştıran uç değer. Ne yazık ki bağlı fiziksel bir farem yok, bu yüzden testim iki parmağımla eşit mesafeler ve hızlarla sınırlı.
— Phrogz
Soruyu, OS X ve Win7 genelinde en iyi 5 tarayıcının davranışıyla ilgili ayrıntılarla güncelledim. Bu bir mayın tarlası, OS X üzerindeki Chrome sorunlu aykırı değer olarak görünüyor.
— Phrogz
@Phrogz Olmamalı mı e.wheelDelta/120?
— Šime Vidas
@ ŠimeVidas Evet, kopyaladığım ve kullandığım kod açıkça yanlıştı. Sen daha iyi kod görebilirsiniz aşağıda cevabım .
— Phrogz

Yanıtlar:

57

Eylül 2014'ü Düzenle

Verilen:

  • Aynı tarayıcının OS X üzerindeki farklı sürümleri geçmişte farklı değerler vermiştir ve gelecekte de bunu yapabilir ve
  • İzleme dörtgenini OS X'te kullanmak, fare tekerleği kullanmaya çok benzer efektler sağlar, ancak çok farklı olay değerleri verir ve yine de cihaz farkı JS tarafından algılanamaz.

… Yalnızca şu basit, işaret tabanlı sayma kodunu kullanmanızı önerebilirim:

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

Orijinal doğru olma girişimi aşağıdadır.

İşte değerleri normalleştirmek için bir komut dosyasını ilk denemem. OS X'de iki kusuru vardır: OS X üzerindeki Firefox, olması gerekenin 1/3 değerini üretecek ve OS X üzerindeki Chrome, olması gerekenin 1/40 değerini üretecektir.

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

Bu kodu kendi tarayıcınızda burada test edebilirsiniz: http://phrogz.net/JS/wheeldelta.html

OS X üzerinde Firefox ve Chrome'daki davranışı tespit etmek ve iyileştirmek için önerilerinizi bekliyoruz.

Düzenleme : @ Tom'dan bir öneri, her olay çağrısını ayarlamak için mesafe işaretini kullanarak tek bir hareket olarak saymaktır. Bu, OS X'te düzgün / hızlandırılmış kaydırma altında harika sonuçlar vermeyeceği gibi, fare tekerleği çok hızlı hareket ettirildiğinde (örneğin wheelDelta240) mükemmel durumları ele almaz , ancak bunlar nadiren olur. Bu kod, burada açıklanan nedenlerden ötürü artık bu cevabın üst kısmında gösterilen önerilen tekniktir.

— Phrogz
kaynak
@ ŠimeVidas Teşekkürler, temelde sahip olduğum şey bu, ancak Opera OS X'teki 1/3 farkı da hesaba
— katıyorum
@Phrogz, Eylül 2014'te tüm OS X / 3 eklenmiş güncellenmiş bir sürümünüz var mı? Bu, topluluk için harika bir katkı olur!
— Basj
@Phrogz, bu harika olurdu. Burada test etmek için bir
— Mac'im
1
Windows Firefox 35.0.1'de wheelDelta tanımsızdır ve ayrıntı her zaman 0'dır, bu da sağlanan kodun başarısız olmasına neden olur.
— Max Strater
1
@MaxStrater Aynı sorunla karşılaştım, bunun üstesinden gelmek için "deltaY" ekledim, ancak QA'nın (((evt.deltaY <0 || evt.wheelDelta>0) || evt.deltaY < 0) ? 1 : -1)bununla ne bulduğundan emin değilim.
— Brock
28

Çapraz tarayıcı uyumlu ve normalleştirilmiş bir delta (-1 <= delta <= 1) üretme konusundaki çılgın girişimim:

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

Bu tamamen ampiriktir ancak Safari 6, FF 16, Opera 12 (OS X) ve XP'de IE 7'de oldukça iyi çalışır.

— smrtl
kaynak
3
10 kez daha ek oy verebilirsem, yapabilirdim. Çok teşekkür ederim!
— justnorris
Lütfen tam işlevsel kodu bir demoda alabilir misiniz (örn. JsFiddle)?
— adardesign
-Nesneyi önbelleğe almak için bir neden var mı ? evento
— yckart
Hayır yok. oDeğişken biz olay işleyicileri geçebilir orijinal etkinliği olup jQuery veya diğer kütüphaneler gibi bir sarılmış olayı istiyorum göstermek için vardır.
— smrtl
@smrtl n ve n1'i açıklar mısınız? Bu değişkenler ne için?
— Om3ga
28

Facebook'taki arkadaşlarımız bu soruna harika bir çözüm buldu.

React kullanarak oluşturduğum bir veri tablosu üzerinde test ettim ve tereyağı gibi kayıyor!

Bu çözüm çeşitli tarayıcılarda, Windows / Mac'te ve her ikisinde de izleme dörtgeni / fare kullanılarak çalışır. 

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

Kaynak kodu burada bulunabilir: https://github.com/facebook/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js

— George
kaynak
3
NormalizeWHeel.js için orijinal koda paketlenmemiş daha doğrudan bir bağlantı github.com/facebook/fixed-data-table/blob/master/src/…
— Robin Luiten
Teşekkürler @RobinLuiten, orijinal gönderiyi güncelliyor.
— George
Bu şey harika. Sadece onu kullandım ve bir cazibe gibi çalışıyor! İyi iş Facebook :)
— Perry
Nasıl kullanılacağına dair bir örnek verebilir misiniz? Denedim ve FF'de çalışıyor ancak Chrome veya IE'de (11) çalışmıyor ..? Teşekkürler
— Andrew
2
Npm kullanan herkes için, Facebook'un Sabit Veri Tablosundan zaten alınmış olan bu kodun kullanıma hazır bir paketi vardır. Daha fazla ayrıntı için buraya bakın npmjs.com/package/normalize-wheel
— Simon Watson
11

Bazı tarayıcıların zaten desteklediği DOM3 wheel olayını hesaba katarak farklı olaylar / tarayıcılar tarafından döndürülen farklı değerlere sahip bir tablo yaptım (aşağıdaki tablo).

Buna dayanarak, hızı normalleştirmek için bu işlevi yaptım:

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

Tablo mousewheel, wheelve DOMMouseScrollolaylar:

| 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     |                |                |                |           |             |           |
— Sergio
kaynak
2
MacOS altındaki mevcut Safari ve Firefox'ta farklı kaydırma hızlarıyla sonuçlanır.
— Lenar Hoyt
6

Aşağı yukarı kendi kendine yeten başka bir çözüm ...

Ancak bu, olaylar arasında hesaba katılacak zaman almaz. Bazı tarayıcılar her zaman aynı deltaya sahip olayları tetikler ve hızlı kaydırırken yalnızca daha hızlı tetikler. Diğerleri deltaları değiştirir. Zaman hesaba katan uyarlanabilir bir normalleştirici hayal edilebilir, ancak bu biraz dahil olur ve kullanımı garip olur.

Burada mevcut çalışma: 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(); }
}
— Esrar
kaynak
1
Bu çözüm, Trackpad ile Mac'te Chrome ile hiç çalışmıyor.
— justnorris
@Norris Şimdi öyle olduğuna inanıyorum. Sadece bu soruyu buldum ve burada örnek krom benim macbook çalışır
— Harry Moreno
4

Basit ve çalışan çözüm:

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;
}
— Marek
kaynak
3

Dokunmatik cihazlarda yakınlaştırma desteği için, gesturestart, hareket değişimi ve hareket sonu olaylarına kaydolun ve event.scale özelliğini kullanın. Bunun için örnek kodu görebilirsiniz .

Firefox 17 için onwheeletkinliğin masaüstü ve mobil sürümler tarafından desteklenmesi planlanmaktadır ( onwheel üzerindeki MDN belgelerine göre ). Ayrıca Firefox MozMousePixelScrolliçin Gecko'ya özgü olay yararlı olabilir (ancak muhtemelen bu, DOMMouseWheel etkinliği Firefox'ta artık kullanımdan kaldırıldığı için artık kullanımdan kaldırılmıştır).

Windows için, sürücünün kendisi WM_MOUSEWHEEL, WM_MOUSEHWHEEL olaylarını (ve belki de dokunmatik yüzey kaydırma için WM_GESTURE olayını?) Oluşturuyor gibi görünüyor. Bu, Windows'un veya tarayıcının fare tekerleği olay değerlerini neden normalleştirmediğini açıklar (ve değerleri normalleştirmek için güvenilir kod yazamayacağınız anlamına gelebilir).

İçin onwheel( değil onmousewheel) olay Internet Explorer'da destek IE9 ve IE10 için, ayrıca kullanabilirsiniz W3C standart onwheel olay. Ancak bir çentik 120'den farklı bir değer olabilir (örneğin bu test sayfasını kullandığımda faremde tek bir çentik 111 (-120 yerine) olur ). İlgili olabilecek diğer ayrıntılar tekerlek olayları içeren başka bir makale yazdım .

Temel olarak tekerlek olayları için kendi testimde (kaydırma için değerleri normalleştirmeye çalışıyorum), işletim sistemi, tarayıcı satıcısı, tarayıcı sürümü, olay türü ve cihaz (Microsoft eğimli teker fare, dizüstü bilgisayar dokunmatik yüzey hareketleri) için farklı değerler aldığımı buldum. , kaydırma bölgeli dizüstü bilgisayar dokunmatik yüzey, Apple sihirli fare, Apple güçlü fare kaydırma topu, Mac dokunmatik yüzey vb.).

Tarayıcı yapılandırmasından (örn. Firefox mousewheel.enable_pixel_scrolling, chrome --scroll-pixel = 150), sürücü ayarlarından (örn. Synaptics dokunmatik yüzey) ve işletim sistemi yapılandırmasından (Windows fare ayarları, OSX Fare tercihleri, X.org düğme ayarları).

— Robocat
kaynak
2

Bu, bugün birkaç saattir mücadele ettiğim bir sorun ve ilk kez değil :(

Bir "kaydırma" ile değerleri toplamaya ve farklı tarayıcıların değerleri nasıl raporladığını görmeye çalışıyorum ve Safari neredeyse tüm platformlarda daha büyük sayılar sıralamasıyla, Chrome oldukça fazla rapor veriyor (3 kat daha fazla ) firefox'tan daha fazla, firefox uzun vadede dengeleniyor, ancak küçük hareketler üzerindeki platformlar arasında oldukça farklı (Ubuntu gnome'da, neredeyse yalnızca +3 veya -3, daha küçük olayları özetliyor ve ardından büyük bir "+3" gönderiyor gibi görünüyor)

Şu anda bulunan mevcut çözümler üçtür:

  1. Daha önce bahsedilen "yalnızca işareti kullanın", her türlü ivmeyi yok eder
  2. Tarayıcıyı küçük sürüm ve platforma kadar koklayın ve uygun şekilde ayarlayın
  3. Qooxdoo, kısa süre önce deltayı şimdiye kadar alınan minimum ve maksimum değere göre ölçeklendirmeye çalışan kendi kendini uyarlayan bir algoritma uyguladı.

Qooxdoo'daki fikir iyi ve işe yarıyor ve şu anda tamamen tutarlı çapraz tarayıcı bulduğum tek çözüm.

Maalesef ivmeyi de yeniden normalleştirme eğilimindedir. Denerseniz (demolarında) ve bir süre maksimum hızda yukarı ve aşağı kaydırırsanız, son derece hızlı veya çok yavaş kaydırmanın temelde neredeyse aynı miktarda hareket ürettiğini fark edeceksiniz. Tersine, sayfayı yeniden yükler ve çok yavaş kaydırırsanız, oldukça hızlı kaydırılacağını fark edeceksiniz ".

Bu, bir Mac kullanıcısı için (benim gibi), dokunmatik yüzeyde güçlü kaydırma hareketleri yapmak için kullanılan ve kaydırılan şeyin üstüne veya altına gelmeyi bekleyen bir sinir bozucu.

Dahası, elde edilen maksimum değere göre fare hızını düşürdüğü için, kullanıcınız onu ne kadar hızlandırmaya çalışırsa, o kadar yavaşlarken, "yavaş kaydırma" yapan bir kullanıcı oldukça yüksek hızlar yaşayacaktır.

Bu, bu (aksi takdirde mükemmel) çözümü, çözüm 1'in biraz daha iyi bir uygulaması yapar.

Çözümü jquery mousewheel eklentisine taşıdım: http://jsfiddle.net/SimoneGianni/pXzVv/

Bir süre onunla oynarsanız, oldukça homojen sonuçlar almaya başlayacağınızı göreceksiniz, ancak aynı zamanda + 1 / -1 değerlerine oldukça hızlı bir şekilde eğilimli olduğunu da göreceksiniz.

Şimdi, zirveleri daha iyi tespit etmek için geliştirmeye çalışıyorum, böylece her şeyi "ölçek dışı" göndermesinler. Tutarlı bir çıktı elde etmek için delta değeri olarak 0 ile 1 arasında bir kayan nokta değeri elde etmek de güzel olurdu.

— Simone Gianni
kaynak
1

Tüm tarayıcılarda tüm işletim sistemlerinde tüm kullanıcıları normalleştirmenin kesinlikle basit bir yolu yoktur.

Listelenen varyasyonlarınızdan daha kötüleşiyor - WindowsXP + Firefox3.6 kurulumumda fare tekerleğim bir çentik kaydırmada 6 yapıyor - muhtemelen unuttuğum bir yerde, ya işletim sisteminde ya da yaklaşık bir yerde fare tekerleğini hızlandırdığım için: yapılandırma

Bununla birlikte, benzer bir sorun üzerinde çalışıyorum (benzer bir uygulama btw, ancak tuval olmayan) ve sadece +1 / -1 delta işaretini kullanarak ve en son ateşlendiğinde zamanla ölçerek aklıma geliyor. ivme oranına sahip, yani. eğer birisi kaydırır kez vs birkaç dakika içinde birkaç kez (hangi isterim bahis google öyle eşler nasıl).

Konsept testlerimde iyi çalışıyor gibi görünüyor, sadece 100 ms'den daha az bir şey hızlanmaya katkıda bulunuyor.

— ck_
kaynak
-2 
var onMouseWheel = function(e) {
    e = e.originalEvent;
    var delta = e.wheelDelta>0||e.detail<0?1:-1;
    alert(delta);
}
$("body").bind("mousewheel DOMMouseScroll", onMouseWheel);
— Matthieu Chavigny
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.