ব্রাউজারগুলি জুড়ে মাউস হুইলের গতি সাধারণকরণ

147

জন্য কোন অন্য প্রশ্নের আমি ক্ষান্ত এই উত্তর সহ, এই নমুনা কোড ।

এই কোডটিতে আমি কোনও এইচটিএমএল 5 ক্যানভাস জুম ইন / আউট করতে মাউস হুইলটি ব্যবহার করি। আমি এমন কিছু কোড পেয়েছি যা ক্রোম এবং ফায়ারফক্সের মধ্যে গতির পার্থক্যকে স্বাভাবিক করে তোলে। তবে সাফারিতে জুম হ্যান্ডলিং এর যেকোনটির থেকে অনেক বেশি দ্রুত।

আমার কাছে বর্তমানে কোডটি এখানে রয়েছে:

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

ক্রোম ভি 10/11, ফায়ারফক্স ভি 4, সাফারি ভি 5, অপেরা ভি 11 এবং আই 9 জুড়ে একই পরিমাণ মাউস হুইল ঘূর্ণায়মানের জন্য আমি একই 'ডেল্টা' মান পেতে কী কোড ব্যবহার করতে পারি?

এই প্রশ্নটি সম্পর্কিত, তবে এর কোনও ভাল উত্তর নেই।

সম্পাদনা : আরও তদন্তে দেখা যায় যে একটি স্ক্রোল ইভেন্ট 'আপ' হ'ল:

                  | evt.wheelDelta | evt.detail
------------------ + + ---------------- + + ------------
  সাফারি ভি 5 / উইন 7 | 120 | 0
  সাফারি ভি 5 / ওএস এক্স | 120 | 0
  সাফারি ভি 7 / ওএস এক্স | 12 | 0
 ক্রোম ভি 11 / উইন 7 | 120 | 0
 ক্রোম ভি 37 / উইন 7 | 120 | 0
 ক্রোম ভি 11 / ওএস এক্স | 3 (!) | 0 (সম্ভবত ভুল)
 ক্রোম ভি 37 / ওএস এক্স | 120 | 0
        আইই 9 / উইন 7 | 120 | অনির্দিষ্ট
  অপেরা ভি 11 / ওএস এক্স | 40 | -1
  অপেরা ভি 24 / ওএস এক্স | 120 | 0
  অপেরা ভি 11 / উইন 7 | 120 | -3
 ফায়ারফক্স ভি 4 / উইন 7 | অপরিবর্তিত | -3
 ফায়ারফক্স ভি 4 / ওএস এক্স | অপরিবর্তিত | -1
ফায়ারফক্স ভি 30 / ওএস এক্স | অপরিবর্তিত | -1

আরও, ওএস এক্স-এ ম্যাকবুক ট্র্যাকপ্যাড ব্যবহার করা ধীরে ধীরে চলার পরেও বিভিন্ন ফলাফল দেয়:

সাফারি এবং ক্রোমে, wheelDeltaমাউস হুইলের 120 এর পরিবর্তে 3 এর মান।
ফায়ারফক্সে detailসাধারণত হয় 2, কখনও কখনও 1, তবে খুব ধীরে ধীরে স্ক্রোল করার সময় সমস্ত ইভেন্ট হ্যান্ডেলার আগুন জ্বলে না ।

সুতরাং প্রশ্নটি হ'ল:

এই আচরণের পার্থক্য করার সর্বোত্তম উপায় কী (আদর্শভাবে কোনও ব্যবহারকারী এজেন্ট বা ওএস স্নিফিং ছাড়াই)?

javascript mousewheel

— Phrogz
সূত্র

দুঃখিত, আমি আমার প্রশ্নটি মুছে ফেলেছি। আমি এখনই একটি উত্তর লিখছি। আমি আরও অনেক কিছু পাওয়ার আগে, আপনি ম্যাক ওএস এক্সের সাফারিতে স্ক্রোলিংয়ের কথা বলছেন? আপনি যখন একটু স্ক্রোল করেন, তখন এটি কিছুটা স্ক্রোল করে, তবে আপনি যদি ধ্রুবক হার বজায় রাখেন, তবে এটি ক্রমশ দ্রুততর হয়?

— ব্লেন্ডার

@ ব্লেন্ডার আমি এখনই ওএস এক্সে পরীক্ষা করছি, এবং হ্যাঁ, সাফারি হ'ল ক্রোমের চেয়ে প্রায় 20x দ্রুত জুম করে চলেছে out দুর্ভাগ্যক্রমে আমার কোনও শারীরিক মাউস সংযুক্ত নেই, তাই আমার পরীক্ষাটি দু'আঙুলের সোয়াইপগুলি সবিস্তারে দূরত্ব এবং গতিতে সীমাবদ্ধ।

— ফ্রোগজ

আমি ওএস এক্স এবং উইন 7 জুড়ে শীর্ষ 5 ব্রাউজারগুলির আচরণ সম্পর্কিত বিশদ সহ প্রশ্নটি আপডেট করেছি। এটি একটি মাইনফিল্ড, ওএস এক্স-এ ক্রোমযুক্ত হয়ে সমস্যাযুক্ত উত্স হিসাবে উপস্থিত হবে।

— ফ্রোগজ

@Phrogz করা উচিত নয় এটা হতে e.wheelDelta/120?

— Vidime বিদাস

@ ŠimeVidas হ্যাঁ, আমি যে কোডটি অনুলিপি করেছি এবং ব্যবহার করছি সেটি স্পষ্টতই ভুল ছিল was আপনি নীচে আমার উত্তর আরও ভাল কোড দেখতে পারেন ।

— ফ্রেগজ

57

সেপ্টেম্বর 2014 সম্পাদনা করুন

দেত্তয়া আছে:

ওএস এক্স-তে একই ব্রাউজারের বিভিন্ন সংস্করণ অতীতে বিভিন্ন মান পেয়েছে এবং ভবিষ্যতেও এটি করতে পারে এবং
ওএস এক্স-এ ট্র্যাকপ্যাড ব্যবহার করা মাউস হুইল ব্যবহারের ক্ষেত্রে খুব একই ধরণের প্রভাব দেয়, তবুও খুব আলাদা ইভেন্টের মান দেয় এবং এখনও ডিএসের পার্থক্যটি জেএস দ্বারা সনাক্ত করা যায় না J

… আমি কেবলমাত্র এই সাধারণ, সাইন-ভিত্তিক-গণনা কোড ব্যবহার করার পরামর্শ দিতে পারি:

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/1 মান তৈরি করবে।

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

ফায়ারফক্স এবং ওএস এক্স-এ ক্রোমের আচরণ সনাক্তকরণ এবং উন্নতি করার পরামর্শগুলি স্বাগত।

সম্পাদনা করুন : টম থেকে একটি পরামর্শ হ'ল প্রতিটি ইভেন্ট কলকে সামঞ্জস্য করার জন্য দূরত্বের চিহ্ন ব্যবহার করে কেবল একটি একক পদক্ষেপ হিসাবে গণনা করা। এটি ওএস এক্স-তে মসৃণ / ত্বরিত স্ক্রোলিংয়ের অধীনে দুর্দান্ত ফলাফল দেয় না বা মাউস চাকাটি খুব দ্রুত সরানো হয় (উদাহরণস্বরূপ wheelDelta240 হয়) তবে পুরোপুরি কেসগুলি পরিচালনা করতে পারে না তবে এগুলি খুব কমই ঘটে। এই কোডটি এখন বর্ণিত কারণগুলির জন্য এই উত্তরের উপরে প্রদর্শিত প্রস্তাবিত কৌশল technique

— Phrogz
সূত্র

@ আইমামিভিডাস ধন্যবাদ, মূলত যা আমার কাছে রয়েছে তা বাদে আমি অপেরা ওএস এক্স-এর মধ্যে 1/3 পার্থক্যের

— জন্যও দায়বদ্ধ

@ ফ্রোগজ, আপনার কি সমস্ত সেপ্টেম্বর ২০১৪-এ একটি আপডেট সংস্করণ রয়েছে? এটি সম্প্রদায়ের জন্য একটি দুর্দান্ত সংযোজন হবে!

— বাসজ

@ ফ্রোগজ, এটি দুর্দান্ত হবে। এখানে পরীক্ষার জন্য আমার কাছে ম্যাক নেই ... (আমি নিজের খ্যাতি না থাকলেও এর জন্য অনুদান দিতে পেরে আমি খুশি হব;))

— বাসজ

1

উইন্ডোজ ফায়ারফক্স ৩৫.০.১ এ, হুইলডেল্টা অনির্ধারিত থাকে এবং বিশদ সর্বদা 0 থাকে, যা সরবরাহকৃত কোডটিকে ব্যর্থ করে তোলে।

— ম্যাক্স স্ট্রটার

1

@ ম্যাক্সট্রেটার একই সমস্যার মুখোমুখি হয়েছিল, আমি এটিকে "ডেল্টাওয়াই" যুক্ত করেছি যে এই দিক থেকে উত্তরণে (((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 বার upvote করতে পারতাম। তোমাকে অনেক ধন্যবাদ!

— justnorris

আপনি কি দয়া করে একটি ডেমোতে (যেমন জেএসফিডাল) পুরো কার্যকরী কোডটি পেতে পারেন?

— অ্যাডার্ডাইজাইন

-অবজেক্টটিকে ক্যাশে দেওয়ার eventকোনও কারণ আছে o?

— ইয়াকার্ট

নাহ কিছুই নেই। oপরিবর্তনশীল দেখানোর জন্য আমরা আসল ঘটনা এবং jQuery এর বা অন্যান্য লাইব্রেরি মত একটি আবৃত ঘটনা চান ইভেন্ট হ্যান্ডলার থেকে পাস হতে পারে আছে।

— smrtl

@ smrtl আপনি কি এন এবং এন 1 ব্যাখ্যা করতে পারেন? এই পরিবর্তনগুলি কি জন্য?

— Om3ga

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

আরও একটি সরাসরি লিঙ্ক যা নরমালাইজড হিল.জেস github.com/facebook/fixed-data-table/blob/master/src/…

— রবিন লুইটেন

আসল পোস্ট আপডেট করে @ রবিনলুইটেনকে ধন্যবাদ Thanks

— জর্জ

এই জিনিস উজ্জ্বল। সবেমাত্র এটির ব্যবহার হয়েছে এবং কবজির মতো কাজ করে! গুড জব ফেসবুক :)

— পেরি

আপনি কীভাবে এটি ব্যবহার করবেন তার কিছু উদাহরণ দিতে পারেন? আমি এটি চেষ্টা করেছি এবং এটি এফএফ এ কাজ করে তবে ক্রোম বা আইই (11) এ নয় ..? ধন্যবাদ

— অ্যান্ড্রু

2

এনপিএম ব্যবহারকারী যে কোনও ব্যক্তির জন্য ইতিমধ্যে ফেসবুকের ফিক্সড ডেটা টেবিল থেকে উত্তোলিত কেবল এই কোডের প্যাকেজ ব্যবহার করার জন্য প্রস্তুত। আরও বিশদ জানতে এখানে দেখুন npmjs.com/package/normalize-wheel

— সাইমন ওয়াটসন

11

আমি বিভিন্ন ইভেন্ট / ব্রাউজার দ্বারা ফিরিয়ে নেওয়া বিভিন্ন মান সহ একটি টেবিল তৈরি করেছি, যা কিছু ব্রাউজার ইতিমধ্যে সমর্থন করে এমন ডিওএম 3 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

ম্যাকোএসের অধীনে বর্তমান সাফারি এবং ফায়ারফক্সে বিভিন্ন স্ক্রোলিং গতির ফলাফল।

— লেনার হোয়েট

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

— Marek
সূত্র

3

টাচ ডিভাইসে জুম সমর্থনের জন্য, অঙ্গভঙ্গি স্টার্ট, অঙ্গভঙ্গি এবং ইঙ্গিত ইভেন্টের জন্য নিবন্ধন করুন এবং ইভেন্ট.স্কেল সম্পত্তি ব্যবহার করুন। আপনি এটির জন্য উদাহরণ কোড দেখতে পারেন ।

ফায়ারফক্স ১ For-এর জন্য onwheelইভেন্টটি ডেস্কটপ এবং মোবাইল সংস্করণগুলি দ্বারা সমর্থন করার পরিকল্পনা করা হয়েছে ( অনওয়েলে এমডিএন ডক্স অনুসারে )। ফায়ারফক্সের জন্যও সম্ভবত গেকো নির্দিষ্ট MozMousePixelScrollইভেন্টটি কার্যকর (যদিও সম্ভবত এটি এখন ফায়ারফক্সে ডিওমমাউসওহিল ইভেন্টটিকে অবমূল্যায়ন করা হয়)।

উইন্ডোজের জন্য, ড্রাইভার নিজেই ডাব্লুএম_উউসউইউইচিল, ডাব্লুএম_মাউসএইচডাব্লুএইচএল ইভেন্টগুলি (এবং সম্ভবত টাচপ্যাড প্যানিংয়ের জন্য ডাব্লুএম_জিস্টেয়ার ইভেন্ট?) তৈরি করেছে বলে মনে হচ্ছে? এটি ব্যাখ্যা করবে যে উইন্ডোজ বা ব্রাউজারটি মাউসওহিল ইভেন্টের মানগুলিকে নিজেরাই সাধারন বলে মনে হচ্ছে না (এবং এর অর্থ হতে পারে আপনি মানগুলি স্বাভাবিক করার জন্য নির্ভরযোগ্য কোড লিখতে পারবেন না)।

আইই 9 এবং আই 10 এর জন্য ইন্টারনেট এক্সপ্লোরারে ইভেন্টের জন্য onwheel( অনউইসওহিল নয় ) জন্য আপনি ডাব্লু 3 সি স্ট্যান্ডার্ড ইভেন্টটিও ব্যবহার করতে পারেন । তবে একটি খাঁজটি এই পরীক্ষার পৃষ্ঠাটি ব্যবহার করে আমার মাউসটিতে 120 (যেমন একক খাঁজ 111 (-120 এর পরিবর্তে) হয়ে যায়) এর চেয়ে আলাদা মান হতে পারে । প্রাসঙ্গিক হতে পারে এমন অন্যান্য বিশদ বিবরণের সাথে আমি আর একটি নিবন্ধ লিখেছি । onwheel

মূলত হুইল ইভেন্টগুলির জন্য আমার নিজের পরীক্ষায় (আমি স্ক্রোলিংয়ের জন্য মানগুলি স্বাভাবিক করার চেষ্টা করছি), আমি দেখতে পেয়েছি যে আমি ওএস, ব্রাউজার বিক্রেতার, ব্রাউজার সংস্করণ, ইভেন্টের ধরণ এবং ডিভাইসের (মাইক্রোসফ্ট টিল্টহিল মাউস, ল্যাপটপ টাচপ্যাড অঙ্গভঙ্গি) জন্য বিভিন্ন মান পাই , স্ক্রোলজোন সহ ল্যাপটপ টাচপ্যাড, অ্যাপল ম্যাজিক মাউস, অ্যাপল শক্তিশালী মাউস স্ক্রোলবল, ম্যাক টাচপ্যাড, ইত্যাদি)।

এবং ব্রাউজার কনফিগারেশন (যেমন ফায়ারফক্স মাউসওয়েল.এনেবল_পিক্সেল_স্রোলিং, ক্রোম - স্ক্রোল-পিক্সেল = 150), ড্রাইভার সেটিংস (উদাহরণস্বরূপ সিনাপটিক্স টাচপ্যাড) এবং ওএস কনফিগারেশন (উইন্ডোজ মাউস সেটিংস, ওএসএক্স মাউস পছন্দসই, X.org বোতাম সেটিংস)।

— robocat
সূত্র

2

এটি এমন একটি সমস্যা যার সাথে আমি আজ কয়েক ঘন্টা ধরে লড়াই করছি, এবং প্রথমবারের মতো নয় :(

আমি একটি "সোয়াইপ" এর সাথে মানগুলি যোগ করার চেষ্টা করেছি এবং দেখুন যে বিভিন্ন ব্রাউজারগুলি কীভাবে মূল্যবোধের প্রতিবেদন করে এবং প্রায় সমস্ত প্ল্যাটফর্মগুলিতে সাফারি রিপোর্টিং ক্রমের সাথে ক্রোম আরও অনেক বেশি রিপোর্ট করে (যেমন 3 গুণ বেশি ) ফায়ারফক্সের চেয়ে, ফায়ারফক্স দীর্ঘ সময় ধরে ভারসাম্যপূর্ণ হয়ে থাকে তবে ছোট আন্দোলনের প্ল্যাটফর্মগুলির মধ্যে একেবারেই আলাদা (উবুন্টু জিনোমে, প্রায় +3 বা -3-তে মনে হয় এটি ছোট ইভেন্টগুলির সমষ্টি এবং তারপরে একটি বড় "+3" প্রেরণ করে)

এখনই পাওয়া সমাধানগুলি তিনটি:

ইতিমধ্যে উল্লিখিত "কেবলমাত্র চিহ্ন" ব্যবহার করুন যা কোনও ধরণের ত্বরণকে হত্যা করে
গৌণ সংস্করণ এবং প্ল্যাটফর্ম পর্যন্ত ব্রাউজারটি স্নিগ্ধ করুন এবং সঠিকভাবে সামঞ্জস্য করুন
কুকসডু সম্প্রতি একটি স্ব-অভিযোজিত অ্যালগরিদম প্রয়োগ করেছে, যা মূলত এ পর্যন্ত প্রাপ্ত ন্যূনতম এবং সর্বাধিক মানের উপর ভিত্তি করে ব-দ্বীপকে স্কেল করার চেষ্টা করে।

Qooxdoo এ ধারণাটি ভাল, এবং কাজ করে এবং আমি বর্তমানে সম্পূর্ণরূপে সামঞ্জস্যপূর্ণ ক্রস ব্রাউজার হিসাবে পাওয়া একমাত্র সমাধান।

দুর্ভাগ্যক্রমে এটি ত্বরণকেও পুনর্নির্মাণ করতে থাকে। যদি আপনি এটি চেষ্টা করেন (তাদের গণতন্ত্রে) এবং কিছুক্ষণের জন্য সর্বাধিক গতিতে উপরে এবং নীচে স্ক্রোল করেন তবে আপনি লক্ষ্য করবেন যে খুব দ্রুত বা অত্যন্ত ধীর গতিতে স্ক্রোলিং মূলত প্রায় একই পরিমাণে চলন উত্পন্ন করে। বিপরীতে আপনি যদি পৃষ্ঠাটি পুনরায় লোড করেন এবং কেবল খুব ধীরে ধীরে সোয়াইপ করেন তবে আপনি লক্ষ্য করবেন যে এটি বেশ দ্রুত স্ক্রোল করবে "।

এটি কোনও ম্যাক ব্যবহারকারীর জন্য হতাশাজনক (আমার মতো) টাচপ্যাডে জোরালো স্ক্রোল সোয়াইপ দিত এবং স্ক্রোলড জিনিসটির শীর্ষে বা নীচে পৌঁছানোর প্রত্যাশা করে।

আরও বেশি, যেহেতু এটি প্রাপ্ত সর্বাধিক মানের উপর ভিত্তি করে মাউসের গতি কমিয়ে দেয়, আপনার ব্যবহারকারী যত বেশি এটির গতি বাড়ানোর চেষ্টা করবেন তত বেশি এটি ধীর হয়ে যাবে, যখন একজন "ধীর স্ক্রোলিং" ব্যবহারকারী বেশ দ্রুত গতির অভিজ্ঞতা অর্জন করবে।

এটি এই (অন্যথায় উজ্জ্বল) সমাধানটিকে সমাধান 1 এর কিছুটা আরও ভাল প্রয়োগ করে।

আমি jquery মাউসহিল প্লাগইনটিতে সমাধানটি পোর্ট করেছি: http://jsfiddle.net/SimoneGianni/pXzVv/

আপনি যদি এটির জন্য কিছুক্ষণ খেলেন তবে আপনি দেখতে পাবেন যে আপনি বেশ সমজাতীয় ফলাফল পেতে শুরু করেছেন, তবে আপনি এটিও লক্ষ্য করবেন যে এটি +1 / -1 মানগুলি খুব দ্রুত ঝোঁক করে।

আমি শিখর আরও ভালভাবে সনাক্ত করতে এটি বাড়ানোর বিষয়ে কাজ করছি, যাতে তারা সবকিছু "স্কেল অফ আউট" না পাঠায়। ডেল্টা মান হিসাবে 0 এবং 1 এর মধ্যে একটি ভাসমান মান পাওয়াও ভাল লাগবে, যাতে সুসংগত আউটপুট থাকে।

— সিমোন গিয়ানী
সূত্র

1

সমস্ত ব্রাউজারে সমস্ত ওএস এর সমস্ত ব্যবহারকারী জুড়ে স্বাভাবিক করার কোনও সহজ উপায় নেই।

এটি আপনার তালিকাভুক্ত বৈচিত্রগুলির চেয়ে আরও খারাপ হয়ে যায় - আমার উইন্ডোজএক্সপি + ফায়ারফক্স ৩..6 সেটআপে আমার মাউসওয়েল এক খাঁজ স্ক্রোল প্রতি does করে - সম্ভবত কোথাও আমি ভুলে গিয়েছি যে আমি মাউস হুইলটিকে ওএসে বা কোথাও কোথাও ত্বরান্বিত করেছি: কনফিগ

তবে আমি একই ধরণের সমস্যায় (একই ধরণের অ্যাপ বিটিডব্লিউ, তবে নন-ক্যানভাস সহ) কাজ করছি এবং এটি আমার কাছে কেবলমাত্র +1 / -1 এর ব-দ্বীপ চিহ্ন ব্যবহার করে এবং শেষ বারের সময় চালিত সময়ের সাথে পরিমাপ করে আপনি হবে ত্বরণের হার আছে, অর্থাত্‍। যদি কেউ কয়েক মুহুর্তে একবার বনাম কয়েক বার স্ক্রোল করে (তবে আমি এটিই ধরব যে গুগল ম্যাপ কীভাবে এটি করে)।

ধারণাটি আমার পরীক্ষাগুলিতে ভালভাবে কাজ করছে বলে মনে হচ্ছে, কেবলমাত্র 100 মিমি থেকে কম কিছু তৈরি করুন ত্বরণকে যুক্ত করুন।

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

— ম্যাথিউ চ্যাভিনি
সূত্র