การทำให้ความเร็ว mousewheel ในเบราว์เซอร์เป็นปกติ

สำหรับคำถามอื่นฉันได้รวบรวมคำตอบนี้รวมถึงโค้ดตัวอย่างนี้ด้วย

ในรหัสนั้นฉันใช้ล้อเมาส์เพื่อซูมเข้า / ออกจากผ้าใบ HTML5 ฉันพบรหัสบางอย่างที่ทำให้ความเร็วแตกต่างกันตามปกติระหว่าง Chrome และ Firefox อย่างไรก็ตามการจัดการการซูมใน Safari นั้นเร็วกว่าในทั้งสองอย่างมาก

นี่คือรหัสที่ฉันมีในปัจจุบัน:

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 และ IE9

คำถามนี้เกี่ยวข้อง แต่ไม่มีคำตอบที่ดี

แก้ไข : การตรวจสอบเพิ่มเติมแสดงให้เห็นว่าเหตุการณ์เลื่อนหนึ่ง 'ขึ้น' คือ:

                  | 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 (อาจผิด)
 Chrome v37 / OS X | 120 | 0
        IE9 / Win7 | 120 | ไม่ได้กำหนด
  Opera v11 / OS X | 40 | -1
  Opera v24 / OS X | 120 | 0
  Opera v11 / Win7 | 120 | -3
 Firefox v4 / Win7 | ไม่ได้กำหนด | -3
 Firefox v4 / OS X | ไม่ได้กำหนด | -1
Firefox v30 / OS X | ไม่ได้กำหนด | -1

นอกจากนี้การใช้แทร็คแพดของ MacBook บน OS X จะให้ผลลัพธ์ที่แตกต่างแม้จะเคลื่อนไหวช้า:

• บน Safari และ Chrome wheelDeltaค่าของ 3 แทน 120 สำหรับล้อเลื่อนของเมาส์
• บน Firefox detailมักจะเป็น2บางครั้ง1แต่เมื่อเลื่อนช้ามากไม่มีตัวจัดการเหตุการณ์ใดๆ เลย

ดังนั้นคำถามคือ:

อะไรคือวิธีที่ดีที่สุดในการแยกความแตกต่างของพฤติกรรมนี้ (โดยไม่มีตัวแทนผู้ใช้หรือระบบปฏิบัติการดมกลิ่น)

แก้ไขกันยายน 2014

ระบุว่า:

• เบราว์เซอร์รุ่นเดียวกันที่ต่างกันใน OS X ให้ผลต่างกันในอดีตและอาจทำได้ในอนาคตและในอนาคต
• ใช้แทร็คแพบน OS X อัตราผลตอบแทนที่คล้ายกันมากผลกระทบกับการใช้ล้อเมาส์ยังช่วยให้เหตุการณ์ที่แตกต่างกันมากค่าและยังแตกต่างอุปกรณ์ที่ไม่สามารถตรวจพบโดย JS

…ฉันสามารถแนะนำให้ใช้รหัสที่เรียบง่ายและอิงกับการนับรหัสเท่านั้น:

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

ความพยายามดั้งเดิมที่จะแก้ไขให้ถูกต้องมีดังนี้

นี่เป็นความพยายามครั้งแรกของฉันที่สคริปต์เพื่อทำให้ค่าเป็นมาตรฐาน มันมีสองข้อบกพร่องใน OS X: Firefox บน OS X จะสร้างค่า 1/3 สิ่งที่ควรจะเป็นและ Chrome บน OS X จะผลิตค่า 1/40 สิ่งที่ควรเป็น

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

คุณสามารถทดสอบรหัสนี้ในเบราว์เซอร์ของคุณได้ที่นี่: http://phrogz.net/JS/wheeldelta.html

ข้อเสนอแนะสำหรับการตรวจสอบและปรับปรุงพฤติกรรมบน Firefox และ Chrome บน OS X ยินดีต้อนรับ

แก้ไข : หนึ่งข้อเสนอแนะจาก @Tom คือเพียงนับการโทรแต่ละครั้งเป็นการย้ายครั้งเดียวโดยใช้เครื่องหมายของระยะทางเพื่อปรับเปลี่ยน สิ่งนี้จะไม่ให้ผลลัพธ์ที่ยอดเยี่ยมภายใต้การเลื่อนอย่างนุ่มนวล / เร่งความเร็วบน OS X หรือจัดการกรณีที่ไม่สมบูรณ์เมื่อล้อเมาส์ถูกย้ายอย่างรวดเร็ว (เช่นwheelDelta240) แต่สิ่งเหล่านี้เกิดขึ้นไม่บ่อยนัก ตอนนี้รหัสนี้เป็นเทคนิคที่แนะนำซึ่งแสดงไว้ที่ด้านบนของคำตอบนี้ด้วยเหตุผลที่อธิบายไว้ที่นั่น

นี่คือความพยายามอย่างบ้าคลั่งของฉันในการสร้างข้ามเบราว์เซอร์ที่เชื่อมโยงกันและเป็นมาตรฐาน (-1 <= เดลต้า <= 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);

นี่เป็นสังเกตุโดยสิ้นเชิง แต่ใช้งานได้ดีบน Safari 6, FF 16, Opera 12 (OS X) และ IE 7 บน XP

เพื่อนของเราใน Facebook ได้รวบรวมวิธีแก้ไขปัญหานี้ไว้อย่างดีเยี่ยม

ฉันได้ทดสอบบนตารางข้อมูลที่ฉันกำลังสร้างโดยใช้ React และมันเลื่อนเหมือนเนย!

โซลูชันนี้ใช้งานได้กับเบราว์เซอร์ที่หลากหลายบน Windows / Mac และทั้งคู่ใช้ 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 };
}

ซอร์สโค้ดมีอยู่ที่นี่: https://github.com/facebook/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js

ฉันสร้างตารางที่มีค่าต่าง ๆ ที่ส่งคืนโดยเหตุการณ์ / เบราว์เซอร์ที่แตกต่างกันโดยคำนึงถึง wheelเหตุการณ์DOM3ที่เบราว์เซอร์บางตัวสนับสนุนอยู่แล้ว (ตารางใต้)

จากที่ฉันทำฟังก์ชั่นนี้เพื่อทำให้ความเร็วเป็นปกติ:

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

โต๊ะmousewheel, wheelและDOMMouseScrollเหตุการณ์ที่เกิดขึ้น:

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

โซลูชันที่มีตัวเองมากขึ้นหรือน้อยลง ...

แม้ว่าจะไม่ได้ใช้เวลาระหว่างเหตุการณ์ในการพิจารณา เบราว์เซอร์บางตัวดูเหมือนจะเริ่มต้นเหตุการณ์ด้วยเดลต้าเดียวกันเสมอ คนอื่น ๆ ทำเดลต้าแตกต่างกันไป หนึ่งสามารถจินตนาการปรับปกติที่ใช้เวลาพิจารณา แต่ที่จะมีส่วนร่วมและค่อนข้างอึดอัดใจที่จะใช้

ทำงานได้ที่นี่: 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(); }
}

วิธีแก้ปัญหาที่ง่ายและทำงานได้:

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

สำหรับการรองรับการซูมบนอุปกรณ์ระบบสัมผัสให้ลงทะเบียนสำหรับ gesturestart, gesturechange และ gestureend events และใช้คุณสมบัติ event.scale คุณสามารถดูโค้ดตัวอย่างสำหรับสิ่งนี้

สำหรับ Firefox 17 onwheelมีการวางแผนให้รองรับเหตุการณ์บนเดสก์ท็อปและมือถือรุ่น (ตามเอกสาร MDN onwheel ) นอกจากนี้สำหรับ Firefox บางทีMozMousePixelScrollเหตุการณ์เฉพาะของตุ๊กแกก็มีประโยชน์ (แม้ว่าน่าจะเป็นเพราะตอนนี้เลิกใช้แล้วเนื่องจากเหตุการณ์ DOMMouseWheel เลิกใช้แล้วใน Firefox)

สำหรับ Windows ไดรเวอร์ดูเหมือนว่าจะสร้างเหตุการณ์ WM_MOUSEWHEEL, WM_MOUSEHWHEEL (และอาจเป็นเหตุการณ์ WM_GESTURE สำหรับการแพนแป้นสัมผัสของทัชแพดหรือไม่) นั่นจะอธิบายได้ว่าเหตุใด Windows หรือเบราว์เซอร์จึงไม่สามารถทำให้ค่าเหตุการณ์ mousewheel กลับสู่สถานะปกติได้ (และอาจหมายความว่าคุณไม่สามารถเขียนรหัสที่เชื่อถือได้เพื่อทำให้ค่าปกติเป็นมาตรฐาน)

สำหรับการสนับสนุนเหตุการณ์onwheel( ไม่ใช่ onmousewheel) ใน Internet Explorerสำหรับ IE9 และ IE10 คุณสามารถใช้เหตุการณ์มาตรฐาน W3C onwheelอย่างไรก็ตามหนึ่งรอยสามารถเป็นค่าที่แตกต่างจาก 120 (เช่นรอยเดียวกลายเป็น 111 (แทน -120) บนเมาส์ของฉันโดยใช้หน้าทดสอบนี้ ) ฉันเขียนบทความอื่นที่มีวงล้อรายละเอียดอื่น ๆ ที่อาจเกี่ยวข้อง

โดยทั่วไปในการทดสอบเหตุการณ์ล้อ (ฉันพยายามทำให้ค่าเลื่อนเป็นปกติ) ฉันพบว่าฉันได้รับค่าที่แตกต่างกันสำหรับระบบปฏิบัติการผู้จำหน่ายเบราว์เซอร์รุ่นเบราว์เซอร์ประเภทเหตุการณ์และอุปกรณ์ (Microsoft tiltwheel mouse ท่าทางสัมผัสทัชแพดแล็ปท็อป) แล็ปท็อปทัชแพดที่มี scrollzone, Magic Mouse ของ Apple, scrollball ของ Apple อันทรงพลัง, Mac touchpad และอื่น ๆ )

และต้องละเว้นผลข้างเคียงที่หลากหลายจากการกำหนดค่าเบราว์เซอร์ (เช่น Firefox mousewheel.enable_pixel_scrolling, chrome --scroll-pixels = 150) การตั้งค่าไดรเวอร์ (เช่นทัชแพด Synaptics) และการกำหนดค่า OS (การตั้งค่าเมาส์ Windows, การตั้งค่าเมาส์ OSX การตั้งค่าปุ่ม X.org)

นี่เป็นปัญหาที่ฉันต่อสู้มาหลายชั่วโมงแล้ววันนี้ไม่ใช่ครั้งแรก :(

ฉันพยายามที่จะสรุปค่ามากกว่าการ "ปัด" และดูว่าเบราว์เซอร์ที่แตกต่างกันรายงานค่าและพวกเขาแตกต่างกันมากกับ Safari รายงานลำดับที่มีขนาดใหญ่กว่าตัวเลขในแพลตฟอร์มเกือบทั้งหมด Chrome รายงานค่อนข้างมาก (เช่น 3 ครั้งขึ้นไป) ) มากกว่า firefox firefox มีความสมดุลในระยะยาว แต่ค่อนข้างแตกต่างจากแพลตฟอร์มในการเคลื่อนไหวเล็ก ๆ (บน Ubuntu gnome เกือบ +3 หรือ -3 เท่านั้นดูเหมือนว่าจะสรุปเหตุการณ์เล็ก ๆ แล้วส่ง "+3" ใหญ่)

โซลูชันปัจจุบันที่พบในขณะนี้คือสาม:

1. ที่กล่าวถึงแล้ว "ใช้สัญญาณเท่านั้น" ซึ่งฆ่าการเร่งความเร็วใด ๆ
2. สูดดมเบราว์เซอร์เป็นเวอร์ชันและแพลตฟอร์มรองและปรับอย่างเหมาะสม
3. เมื่อเร็ว ๆ นี้ Qooxdoo ได้ใช้อัลกอริทึมการปรับตัวเองซึ่งโดยทั่วไปจะพยายามปรับขนาดเดลต้าตามค่าต่ำสุดและค่าสูงสุดที่ได้รับจนถึงปัจจุบัน

แนวคิดใน Qooxdoo นั้นดีและใช้งานได้และเป็นทางออกเดียวที่ฉันพบว่าเป็นเบราว์เซอร์ข้ามที่สอดคล้องกันอย่างสมบูรณ์

น่าเสียดายที่มันมีแนวโน้มที่จะทำให้ปกติเร่งความเร็วเช่นกัน หากคุณลอง (ในการสาธิต) และเลื่อนขึ้นและลงด้วยความเร็วสูงสุดสักครู่คุณจะสังเกตเห็นว่าการเลื่อนอย่างเร็วมากหรือช้ามากโดยทั่วไปจะสร้างการเคลื่อนไหวเกือบเท่ากัน ในทางตรงกันข้ามถ้าคุณโหลดหน้าซ้ำและกวาดนิ้วไปช้ามากคุณจะสังเกตเห็นว่ามันจะเลื่อนได้ค่อนข้างเร็ว "

สิ่งนี้น่าผิดหวังสำหรับผู้ใช้ Mac (เช่นฉัน) ที่ใช้ในการให้การเลื่อนอย่างแรงบนทัชแพดและคาดว่าจะขึ้นไปถึงด้านบนหรือด้านล่างของสิ่งที่เลื่อน

ยิ่งไปกว่านั้นเนื่องจากมันลดความเร็วของเมาส์ตามค่าสูงสุดที่ได้รับผู้ใช้ของคุณจะพยายามเพิ่มความเร็วมากขึ้นยิ่งจะช้าลงในขณะที่ผู้ใช้ที่ "เลื่อนช้า" จะได้สัมผัสกับความเร็วที่ค่อนข้างเร็ว

สิ่งนี้ทำให้โซลูชันนี้ (ยอดเยี่ยมไม่อย่างนั้น) การใช้โซลูชันที่ดีขึ้นเล็กน้อย 1

ฉันส่งต่อโซลูชันไปยังปลั๊กอิน jquery mousewheel: http://jsfiddle.net/SimoneGianni/pXzVv/

หากคุณเล่นกับมันสักพักคุณจะเห็นว่าคุณจะเริ่มได้ผลลัพธ์ที่เป็นเนื้อเดียวกัน แต่คุณจะสังเกตเห็นว่ามันมีแนวโน้มที่จะมีค่า + 1 / -1 ค่อนข้างเร็ว

ตอนนี้ฉันกำลังพยายามปรับปรุงมันเพื่อตรวจหายอดเขาที่ดีขึ้นเพื่อที่ว่าพวกเขาจะไม่ส่งทุกสิ่งที่ "เกินขนาด" นอกจากนี้ยังเป็นการดีที่จะได้รับค่าทศนิยมระหว่าง 0 และ 1 เป็นค่าเดลต้าเพื่อให้มีผลลัพธ์ที่สอดคล้องกัน

ไม่มีวิธีง่ายๆในการทำให้เป็นมาตรฐานสำหรับผู้ใช้ทั้งหมดในทุกระบบปฏิบัติการในเบราว์เซอร์ทั้งหมด

มันแย่กว่ารูปแบบที่คุณระบุไว้ - ในการติดตั้ง WindowsXP + Firefox3.6 ของฉัน mousewheel ของฉันทำ 6 ต่อการเลื่อนหนึ่งครั้ง - อาจเป็นเพราะบางที่ฉันลืมฉันได้เร่งล้อเมาส์ทั้งในระบบปฏิบัติการหรือที่อื่น ๆ : การตั้งค่า

อย่างไรก็ตามฉันกำลังทำงานกับปัญหาที่คล้ายกัน (กับ app btw ที่คล้ายกัน แต่ไม่ใช่ผ้าใบ) และมันเกิดขึ้นกับฉันโดยใช้เครื่องหมายเดลต้าของ +1 / -1 และวัดเมื่อเวลาผ่านไปมันจะยิงคุณครั้งสุดท้าย มีอัตราการเร่งเช่น ถ้าเลื่อนคนที่ครั้งหนึ่งเคย VS หลายครั้งในช่วงเวลาไม่กี่ (ซึ่งผมเดิมพันจะเป็นวิธีการที่แผนที่ Google ไม่ได้)

แนวคิดดูเหมือนว่าจะทำงานได้ดีในการทดสอบของฉันเพียงแค่ทำอะไรที่น้อยกว่า 100ms เพื่อเร่งความเร็ว

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