ब्राउज़रों में मूसवेल की गति को सामान्य करना

147

के लिए एक अलग प्रश्न मैं बना क्या यह उत्तर सहित, इस नमूना कोड ।

उस कोड में मैं एक HTML5 कैनवस में ज़ूम इन / आउट करने के लिए माउस व्हील का उपयोग करता हूं। मुझे कुछ कोड मिले जो क्रोम और फ़ायरफ़ॉक्स के बीच गति अंतर को सामान्य करता है। हालाँकि, सफारी में जूम हैंडलिंग बहुत अधिक तेज है।

यहाँ वर्तमान में मेरे पास कोड है:

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
------------------ + ---------------- + ------------
  सफारी v5 / Win7 | 120 | 0
  सफ़ारी v5 / OS X | 120 | 0
  सफारी v7 / OS X | 12 | 0
 क्रोम v11 / Win7 | 120 | 0
 क्रोम v37 / Win7 | 120 | 0
 क्रोम v11 / OS X | 3 (!) | 0 (संभवतः गलत है)
 क्रोम v37 / OS X | 120 | 0
        IE9 / Win7 | 120 | अपरिभाषित
  ओपेरा v11 / OS X | 40 | -1
  ओपेरा v24 / OS X | 120 | 0
  ओपेरा v11 / Win7 | 120 | -3
 फ़ायरफ़ॉक्स v4 / Win7 | अपरिभाषित | -3
 फ़ायरफ़ॉक्स v4 / OS X | अपरिभाषित | -1
फ़ायरफ़ॉक्स v30 / OS X | अपरिभाषित | -1

इसके अलावा, OS X पर मैकबुक ट्रैकपैड का उपयोग धीरे-धीरे चलते हुए भी अलग परिणाम देता है:

सफारी और क्रोम पर, wheelDeltaमाउस व्हील के लिए 120 के बजाय 3 का मूल्य है।
फ़ायरफ़ॉक्स पर detailआम तौर पर 2, कभी-कभी होता है 1, लेकिन जब बहुत धीरे-धीरे कोई ईवेंट हेंलर पर स्क्रॉल करता है तो सभी पर ।

तो सवाल यह है:

इस व्यवहार को अलग करने का सबसे अच्छा तरीका क्या है (आदर्श रूप से किसी भी उपयोगकर्ता एजेंट या ओएस सूँघने के बिना)?

javascript mousewheel

— Phrogz
स्रोत

क्षमा करें, मैंने अपना प्रश्न हटा दिया। मैं अभी एक उत्तर लिख रहा हूं। इससे पहले कि मैं बहुत आगे बढ़ूं, क्या आप मैक ओएस एक्स पर सफारी पर स्क्रॉल करने के बारे में बात कर रहे हैं? जब आप थोड़ा स्क्रॉल करते हैं, तो यह थोड़ा स्क्रॉल करता है, लेकिन यदि आप एक स्थिर दर रखते हैं, तो यह उत्तरोत्तर तेज होता जाता है?

— ब्लेंडर

@ ब्लेंडर मैं अभी ओएस एक्स पर परीक्षण कर रहा हूं, और हां, सफारी बाहरी है जो क्रोम की तुलना में लगभग 20 गुना तेजी से ज़ूम कर रहा है। दुर्भाग्य से मेरे पास एक भौतिक माउस नहीं है, इसलिए मेरा परीक्षण दो-उंगली-स्वाइप से ival असमान दूरी और गति तक ही सीमित है।

— फ्रॉग्ज

मैंने ओएस एक्स और विन 7 के शीर्ष 5 ब्राउज़रों के व्यवहार के विवरण के साथ प्रश्न को अपडेट किया है। यह एक खान क्षेत्र है, जिसमें ओएस एक्स पर क्रोम समस्याग्रस्त दिखाई देता है।

— फ्रॉग्ज

@Phrogz यह नहीं होना चाहिए e.wheelDelta/120?

— 26इमे विदेस

@ AndimeVidas, हाँ, मैंने जो कोड कॉपी किया था और जो उपयोग कर रहा था वह स्पष्ट रूप से गलत था। आप नीचे दिए गए मेरे उत्तर में बेहतर कोड देख सकते हैं ।

— फ्रॉग्ज

57

सितंबर 2014 को संपादित करें

मान लीजिये:

ओएस एक्स पर एक ही ब्राउज़र के विभिन्न संस्करणों ने अतीत में अलग-अलग मूल्यों का उत्पादन किया है, और भविष्य में ऐसा हो सकता है, और यह
OS X पर ट्रैकपैड का उपयोग माउस व्हील का उपयोग करने के लिए बहुत समान प्रभाव देता है, फिर भी बहुत अलग घटना मान देता है , और फिर भी जेएस द्वारा डिवाइस अंतर का पता नहीं लगाया जा सकता है।

... मैं केवल इस सरल, साइन-आधारित-गिनती कोड का उपयोग करने की सिफारिश कर सकता हूं:

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

सही होने का मूल प्रयास।

मूल्यों को सामान्य करने के लिए एक स्क्रिप्ट पर यहाँ मेरा पहला प्रयास है। ओएस एक्स पर इसकी दो खामियां हैं: ओएस एक्स पर फ़ायरफ़ॉक्स उन मूल्यों का 1/3 उत्पादन करेगा जो उन्हें होना चाहिए, और ओएस एक्स पर क्रोम 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

OS X पर फ़ायरफ़ॉक्स और क्रोम पर व्यवहार का पता लगाने और सुधार के लिए सुझावों का स्वागत है।

संपादित करें : @Tom से एक सुझाव यह है कि इसे समायोजित करने के लिए दूरी के संकेत का उपयोग करके, प्रत्येक ईवेंट कॉल को केवल एक चाल के रूप में गिना जाए। यह ओएस एक्स पर चिकनी / त्वरित स्क्रॉलिंग के तहत शानदार परिणाम नहीं देगा, और न ही पूरी तरह से मामलों को संभालता है जब माउस व्हील को बहुत तेजी से स्थानांतरित किया जाता है (जैसे wheelDeltaकि 240), लेकिन ये बार-बार होते हैं। यह कोड अब इस उत्तर के शीर्ष पर दिखाई जाने वाली अनुशंसित तकनीक है, जो वहां वर्णित कारणों के लिए है।

— Phrogz
स्रोत

@ HaveimeVidas धन्यवाद, यह मूल रूप से मेरे पास है, सिवाय इसके कि मैं ओपेरा ओएस एक्स पर 1/3 अंतर के लिए भी खाता हूं।

— फ्रॉग्ज

@ फ्रॉग, क्या आपके पास सभी ओएस एक्स / 3 के साथ सितंबर 2014 में अपडेटेड वर्जन है? यह समुदाय के लिए एक बढ़िया अतिरिक्त होगा!

— बसज

@ फ्रॉग, यह बहुत अच्छा होगा। मेरे पास एक मैक नहीं है यहाँ परीक्षण करने के लिए ... (मुझे उसके लिए एक इनाम देने में खुशी होगी, भले ही मैं खुद को बहुत प्रतिष्ठा न दे;))

— बसज

1

विंडोज़ फ़ायरफ़ॉक्स 35.0.1 पर, व्हीडेल्टा अपरिभाषित है और विस्तार हमेशा 0 होता है, जो आपूर्ति किए गए कोड को विफल कर देता है।

— मैक्स स्ट्रेटर

1

@MaxStrater ने इसी समस्या का सामना किया, मैंने इसे दूर करने के लिए "डेल्टा" को इस तरह जोड़ा है कि (((evt.deltaY <0 || evt.wheelDelta>0) || evt.deltaY < 0) ? 1 : -1)यकीन नहीं होता कि क्यूए इसके साथ क्या पता करता है, हालांकि।

— ब्रॉक

28

यहाँ एक क्रॉस ब्राउज़र सुसंगत और सामान्यीकृत डेल्टा (-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);

यह पूरी तरह से अनुभवजन्य है लेकिन एक्सपी पर सफारी 6, एफएफ 16, ओपेरा 12 (ओएस एक्स) और आईई 7 पर काफी अच्छा काम करता है

— smrtl
स्रोत

3

यदि मैं एक और 10 बार उत्थान कर सकता हूं। आपको बहुत - बहुत धन्यवाद!

— justnorris

आप एक डेमो (जैसे jsFiddle) में पूर्ण कार्यात्मक कोड हो सकता है?

— एड्रडिजाइन

क्या कैश करने के लिए event-object में एक कारण है o?

— जकार्ता

नहीं, कोई नहीं है। oचर को दिखाने के लिए हम मूल घटना और नहीं jQuery या अन्य पुस्तकालयों की तरह एक लिपटे घटना चाहते ईवेंट हैंडलर्स को पास कर सकते हैं नहीं है।

— स्मर्टल

@smrtl कृपया आपको n और n1 समझा सकता है? ये चर किसलिए हैं?

— ओम

28

फेसबुक पर हमारे दोस्तों ने इस समस्या का एक बड़ा हल निकाला।

मैंने एक डेटा टेबल पर परीक्षण किया है कि मैं रिएक्ट का उपयोग कर निर्माण कर रहा हूं और यह मक्खन की तरह स्क्रॉल करता है!

यह समाधान विभिन्न ब्राउज़रों पर, विंडोज / मैक पर और ट्रैकपैड / माउस का उपयोग करके दोनों पर काम करता है।

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

— जॉर्ज
स्रोत

3

एक अधिक सीधा लिंक जो सामान्य कोड के लिए सामान्य कोड में बंडल नहीं किया गया है। Heel.js github.com/facebook/fixed-data-table/blob/master/src/…

— रॉबिन लुटेन

धन्यवाद @RobinLuiten, मूल पोस्ट को अपडेट करना।

— जॉर्ज

यह सामान शानदार है। बस इसका उपयोग किया और एक आकर्षण की तरह काम करता है! अच्छी नौकरी फेसबुक :)

— पेरी

क्या आप इसका उपयोग करने का कोई उदाहरण दे सकते हैं? मैंने इसकी कोशिश की और यह FF में काम करता है लेकिन क्रोम या IE (11) में नहीं ..? धन्यवाद

— एंड्रयू

2

Npm का उपयोग करने वाले किसी भी व्यक्ति के लिए फेसबुक के फिक्स्ड डेटा टेबल से पहले से निकाले गए इस कोड के पैकेज का उपयोग करने के लिए तैयार है। अधिक जानकारी के लिए यहां देखें npmjs.com/package/normalize-wheel

— साइमन वॉटसन

11

मैंने DOM3 को ध्यान में रखते हुए विभिन्न घटनाओं / ब्राउज़रों द्वारा लौटाए गए विभिन्न मूल्यों के साथ एक तालिका बनाई wheel घटना कि कुछ ब्राउज़र पहले से ही समर्थन करते हैं (तालिका के तहत)।

उसके आधार पर मैंने गति सामान्य करने के लिए यह कार्य किया:

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

— सर्जियो
स्रोत

2

MacOS के तहत वर्तमान सफारी और फ़ायरफ़ॉक्स में अलग-अलग स्क्रॉलिंग गति के परिणाम।

— लेनार होयट

6

एक और कम या ज्यादा आत्म निहित समाधान ...

हालांकि यह घटनाओं के बीच समय नहीं लेता है। कुछ ब्राउज़र हमेशा एक ही डेल्टा के साथ घटनाओं को आग लगते हैं, और बस जल्दी से स्क्रॉल करने पर उन्हें तेजी से आग लगाते हैं। अन्य लोग डेल्टा को बदलते हैं। एक अनुकूली नॉर्मलाइज़र की कल्पना कर सकता है जो समय को ध्यान में रखता है, लेकिन यह कुछ हद तक शामिल होगा और उपयोग करने के लिए अजीब होगा।

यहाँ उपलब्ध कार्य: 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(); }
}

— Marijn
स्रोत

1

यह समाधान ट्रैकपैड के साथ मैक पर क्रोम के साथ बिल्कुल भी काम नहीं करता है।

— justnorris

@ नॉरिस मुझे विश्वास है कि यह अब करता है। बस यह सवाल मिला और यहाँ उदाहरण मेरी मैकबुक पर क्रोम के साथ काम करता है

— हैरी मोरेनो

4

सरल और काम कर समाधान:

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

— मारेक
स्रोत

3

टच डिवाइसेस पर ज़ूम सपोर्ट के लिए, जेस्चरस्टार्ट, जेस्चरचेंज और जेस्चर इवेंट्स के लिए रजिस्टर करें और ईवेंट का उपयोग करें। आप उदाहरण कोड देख सकते हैं ।

फ़ायरफ़ॉक्स 17 के लिए इस onwheelघटना को डेस्कटॉप और मोबाइल संस्करणों ( onwheel पर MDN डॉक्स के अनुसार ) द्वारा समर्थित करने की योजना है । फ़ायरफ़ॉक्स के लिए भी शायद गेको विशिष्ट MozMousePixelScrollघटना उपयोगी है (हालांकि संभवतः यह अब हटा दिया गया है क्योंकि DOMMouseWheel इवेंट अब फ़ायरफ़ॉक्स में पदावनत हो गया है)।

विंडोज के लिए, ड्राइवर खुद को WM_MOUSEWHEEL, WM_MOUSEHWHEEL इवेंट (और शायद टचपैड पैनिंग के लिए WM_GESTURE इवेंट?) उत्पन्न करता है। यही कारण है कि विंडोज या ब्राउज़र खुद को मूसवेल इवेंट मान को सामान्य करने के लिए प्रतीत नहीं होता है (और इसका मतलब है कि आप मूल्यों को सामान्य करने के लिए विश्वसनीय कोड नहीं लिख सकते हैं)।

के लिए onwheel( नहीं onmousewheel) घटना इंटरनेट एक्सप्लोरर में समर्थन IE9 और IE10 के लिए, आप भी उपयोग कर सकते हैं W3C मानक onwheel घटना। हालाँकि एक पायदान 120 से भिन्न मूल्य हो सकता है (उदाहरण के लिए इस परीक्षण का उपयोग करके मेरे माउस पर एक एकल पायदान 111 (-120 के बजाय) बन जाता है )। मैंने अन्य विवरण पहिया घटनाओं के साथ एक और लेख लिखा जो प्रासंगिक हो सकता है।

मूल रूप से पहिया घटनाओं के लिए अपने स्वयं के परीक्षण में (मैं स्क्रॉल करने के लिए मूल्यों को सामान्य करने की कोशिश कर रहा हूं), मैंने पाया है कि मुझे ओएस, ब्राउज़र विक्रेता, ब्राउज़र संस्करण, ईवेंट प्रकार और डिवाइस (Microsoft tiltwheel माउस, लैपटॉप टचस्क्रीन जेस्चर) के लिए अलग-अलग मान मिलते हैं। , स्क्रॉलज़ोन के साथ लैपटॉप टचपैड, ऐप्पल मैजिक माउस, ऐप्पल माइटी माउस स्क्रॉलबॉल, मैक टचपैड, आदि)।

और ब्राउज़र कॉन्फ़िगरेशन (जैसे फ़ायरफ़ॉक्स mousewheel.enable_pixel_scrolling, chrome --scroll-pixels = 150), ड्राइवर सेटिंग्स (जैसे Synaptics टचपैड), और OS कॉन्फ़िगरेशन (OSB माउस सेटिंग्स, OSX माउस प्राथमिकताएँ) से कई प्रकार के दुष्प्रभावों को अनदेखा करना पड़ता है X.org बटन सेटिंग)।

— robocat
स्रोत

2

यह एक ऐसी समस्या है जो मैं आज कुछ घंटों से लड़ रहा हूँ, और पहली बार नहीं :(

मैं एक "ज़ोर से मारना" पर मानों को समेटने की कोशिश कर रहा हूं और देखें कि कैसे विभिन्न ब्राउज़र मूल्यों की रिपोर्ट करते हैं, और वे बहुत भिन्न होते हैं, लगभग सभी प्लेटफार्मों पर बड़ी संख्या में परिमाण की सफारी रिपोर्टिंग क्रम के साथ, क्रोम रिपोर्टिंग काफी अधिक (जैसे 3 गुना अधिक) ) फ़ायरफ़ॉक्स की तुलना में, फ़ायरफ़ॉक्स लंबे समय तक संतुलित रहता है, लेकिन छोटे आंदोलनों पर प्लेटफार्मों के बीच काफी अलग है (उबंटू सूक्ति पर, लगभग केवल 3 या -3, ऐसा लगता है जैसे यह छोटी घटनाओं को पूरा करता है और फिर एक बड़ा "+3" भेजें)

वर्तमान समाधान अभी तीन हैं:

पहले से ही वर्णित "केवल संकेत का उपयोग करें" जो किसी भी प्रकार के त्वरण को मारता है
ब्राउज़र को मामूली संस्करण और प्लेटफ़ॉर्म तक सूँघें, और ठीक से समायोजित करें
Qooxdoo ने हाल ही में एक आत्म-अनुकूलन एल्गोरिथ्म लागू किया है, जो मूल रूप से अब तक प्राप्त न्यूनतम और अधिकतम मूल्य के आधार पर डेल्टा को स्केल करने की कोशिश करता है।

क्यूओक्सडू में विचार अच्छा है, और काम करता है, और एकमात्र समाधान है जिसे मैंने वर्तमान में पूरी तरह से सुसंगत क्रॉस ब्राउज़र पाया है।

दुर्भाग्य से यह त्वरण को भी बदल देता है। यदि आप इसे (उनके डेमो में) आज़माते हैं, और थोड़ी देर के लिए अधिकतम गति से ऊपर और नीचे स्क्रॉल करते हैं, तो आप देखेंगे कि स्क्रॉलिंग बहुत तेज़ या बेहद धीमी गति से मूल रूप से लगभग समान गति का उत्पादन करती है। इसके विपरीत यदि आप पृष्ठ को फिर से लोड करते हैं और केवल बहुत धीरे-धीरे स्वाइप करते हैं, तो आप देखेंगे कि यह काफी तेज स्क्रॉल करेगा "।

यह एक मैक उपयोगकर्ता (मेरे जैसे) के लिए निराशाजनक है जो टचपैड पर जोरदार स्क्रॉल स्वाइप देता था और स्क्रॉल की गई चीज़ के ऊपर या नीचे आने की उम्मीद करता था।

इससे भी अधिक, चूंकि यह प्राप्त किए गए अधिकतम मूल्य के आधार पर माउस की गति को कम कर देता है, जितना अधिक आपका उपयोगकर्ता इसे गति देने की कोशिश करता है, उतना ही यह धीमा हो जाएगा, जबकि एक "धीमी स्क्रॉलिंग" उपयोगकर्ता काफी तेज गति का अनुभव करेगा।

इससे यह (अन्यथा शानदार) समाधान 1 का थोड़ा बेहतर कार्यान्वयन हो जाता है।

मैंने jquery mousewheel प्लगइन का समाधान पोर्ट किया: http://jsfiddle.net/SimoneGianni/pXzVv/

यदि आप इसके साथ थोड़ी देर के लिए खेलते हैं, तो आप देखेंगे कि आपको काफी सजातीय परिणाम मिलने शुरू हो जाएंगे, लेकिन आप यह भी देखेंगे कि यह काफी तेज + 1 / -1 मान तक जाता है।

मैं अब बेहतर ढंग से चोटियों का पता लगाने के लिए इसे बढ़ाने पर काम कर रहा हूं, ताकि वे सब कुछ "पैमाने से बाहर" न भेजें। डेल्टा मान के रूप में 0 और 1 के बीच एक फ्लोट मूल्य प्राप्त करना भी अच्छा होगा, ताकि एक सुसंगत आउटपुट हो।

— सिमोन गियानी
स्रोत

1

सभी ब्राउज़रों में सभी ओएस में सभी उपयोगकर्ताओं को सामान्य करने का कोई सरल तरीका नहीं है।

यह आपके सूचीबद्ध विविधताओं से भी बदतर हो जाता है - मेरे WindowsXP + Firefox3.6 सेटअप पर मेरे माउसव्हील को 6-प्रति-एक स्क्रॉल करता है - शायद इसलिए क्योंकि कहीं न कहीं मैं भूल गया हूं कि मैंने माउस व्हील को तेज कर दिया है, या तो ओएस में या कहीं के बारे में: config

हालाँकि, मैं एक ऐसी ही समस्या पर काम कर रहा हूँ (एक समान ऐप btw, लेकिन गैर-कैनवास के साथ) और यह केवल +1 / -1 के डेल्टा चिन्ह का उपयोग करके और पिछली बार इसे निकालते समय मापने से मेरे साथ होता है , आप त्वरण की दर है, अर्थात। अगर किसी को कुछ ही क्षणों में एक बार बनाम कई बार स्क्रॉल किया जाता है (जो मैं करूंगा शर्त Google नक्शे को यह करता है)।

मेरे परीक्षणों में यह अवधारणा अच्छी तरह से काम करती है, बस त्वरण में 100ms से कम कुछ भी बनाएं।

— ck_
स्रोत

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

— मैथ्यू चव्हांग
स्रोत