JQuery এ মাউস হুইল ইভেন্টগুলি পান?

Question

scrollJQuery এ মাউস হুইল ইভেন্টগুলি ( ইভেন্টগুলির বিষয়ে কথা বলার নয় ) পাওয়ার কোনও উপায় আছে কি ?

Comments

একটি দ্রুত অনুসন্ধান এই প্লাগইনটিকে সাহায্য করতে পারে।

— জেরাদ রোজ

এই সমাধানটি আমার জন্য কাজ করে: স্ট্যাকওভারফ্লো

— 15১৫496767

: @thejh DOM3 ঘটনা সঙ্গে এই একটি নতুন উত্তর, পোস্ট stackoverflow.com/a/24707712/2256325

— সের্গিও

JQuery স্ক্রোলের

— divy3993

এই সম্পর্কে একটি নোট। আপনি শুধু একটি ইনপুট পরিবর্তন সনাক্ত করতে অনুপস্থিত করছি, এবং এটি মাউস চাকা মাধ্যমে পরিবর্তন সনাক্ত না থাকে তাহলে, চেষ্টা$(el).on('input', ...

— rybo111

Answer 1

একটি প্লাগইন রয়েছে যা একটি অঞ্চলের উপরে / ডাউন মাউস চাকা এবং বেগ সনাক্ত করে।

Comments

প্লাগ লাগানো? আসুন .. নীচে উত্তরটি চেক করুন আপনি এটি ছাড়াই এটি করতে পারেন

Answer 2

​$(document).ready(function(){
    $('#foo').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta /120 > 0) {
            console.log('scrolling up !');
        }
        else{
            console.log('scrolling down !');
        }
    });
});

Comments

DOMMouseScrollইভেন্ট, মুক্তিযোদ্ধা ব্যবহার করা হয় তাই আপনি উভয় শুনতে আছে .bind('DOMMouseScroll mousewheel') {evetns developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/...

— mrzmyr

e.originalEvent.wheelDelta

— এফএফ

আপনার 120 দিয়ে ভাগ করার দরকার নেই এটি

— সিপিইউয়ের

অবশ্যই সেরা উত্তর হতে হবে

তবে যাইহোক, আপনি কেন এটি 120 দিয়ে ভাগ করতে চান? কি ধ্রুব? (আপনি করতে হবে না, যেমন venimus নির্দিষ্ট।)

— mshthn

Answer 3

উভয়ের সাথে আবদ্ধ mousewheelএবং DOMMouseScrollআমার জন্য সত্যিই ভাল কাজ শেষ করেছে:

$(window).bind('mousewheel DOMMouseScroll', function(event){
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
        // scroll up
    }
    else {
        // scroll down
    }
});

এই পদ্ধতিটি আইই 9 +, ক্রোম 33, এবং ফায়ারফক্স 27 এ কাজ করছে।

---

সম্পাদনা করুন - মার্চ 2016

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

(function() {
  var supportOffset = window.pageYOffset !== undefined,
    lastKnownPos = 0,
    ticking = false,
    scrollDir,
    currYPos;

  function doSomething(scrollPos, scrollDir) {
    // Your code goes here...
    console.log('scroll pos: ' + scrollPos + ' | scroll dir: ' + scrollDir);
  }

  window.addEventListener('wheel', function(e) {
    currYPos = supportOffset ? window.pageYOffset : document.body.scrollTop;
    scrollDir = lastKnownPos > currYPos ? 'up' : 'down';
    lastKnownPos = currYPos;

    if (!ticking) {
      window.requestAnimationFrame(function() {
        doSomething(lastKnownPos, scrollDir);
        ticking = false;
      });
    }
    ticking = true;
  });
})();

কোডপেনে জেসি দুপুয়ের ( @ ব্লাইন্ড 85 ) দ্বারা পেন ভ্যানিলা জেএস স্ক্রোল ট্র্যাকিং দেখুন ।

এই কোডটি বর্তমানে কাজ করছে Chrome v50, Firefox v44, Safari v9, and IE9+

তথ্যসূত্র:

• https://developer.mozilla.org/en-US/docs/Web/Events/scroll
• https://developer.mozilla.org/en-US/docs/Web/Events/wheel

Comments

এটি আমার পক্ষে সবচেয়ে ভাল কাজ করেছে। যাইহোক, এই স্ক্রিপ্টটি স্ক্রোল চাকাটির "ক্লিক" প্রতি চালিত হয়। কিছু স্ক্রিপ্ট ব্যবহারের জন্য এটি অপ্রতিরোধ্য হতে পারে। প্রতিটি স্ক্রোল ইভেন্টকে স্ক্রোল হুইল ক্লিকের পরিবর্তে স্ক্রিপ্টটি চালানোর পরিবর্তে এক উদাহরণ হিসাবে বিবেচনা করার কোনও উপায় আছে কি?

— ই

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

— জেসি ডুপুয়

: আমি এই কাজ করতে একটি উপায় খুঁজে পেয়েছে stackoverflow.com/questions/23919035/...

— invot

আপডেটের জন্য ধন্যবাদ. আপনি কি আপনার উত্তরটিতে আপনার কোডটি অনুলিপি করতে পারেন? কোনও দিন কোদেন নেমে যেতে পারে কিনা তা কখনই জানেন না। এর আগেও হয়েছিল happened

— জেডিবি এখনও মনিকা

@ জেসি ডুপুয়ি, আমি এই উত্তরটি উপস্থাপন করব, তবে নথিটি দর্শন ("প্রস্থ: 100vh; উচ্চতা: 100vh") ফিট করে বা "ওভারফ্লো: লুকানো;" পেয়েছে তবে আপনার আপডেট হওয়া সংস্করণ কাজ করবে না। "উইন্ডো.এডএডএভেন্টলিস্টনার ('স্ক্রোল', কলব্যাক)" "উইন্ডো.এডএডএভেন্টলিস্টনার ('মাউসওয়েল', কলব্যাক)" এর সঠিক উত্তর নয়।

— ড্যানিয়েল

Answer 4

এখন পর্যন্ত 2017, আপনি কেবল লিখতে পারেন

$(window).on('wheel', function(event){

  // deltaY obviously records vertical scroll, deltaX and deltaZ exist too
  if(event.originalEvent.deltaY < 0){
    // wheeled up
  }
  else {
    // wheeled down
  }
});

বর্তমান ফায়ারফক্স 51, ক্রোম 56, আই 9 + এর সাথে কাজ করে

Answer 5

"মাউসওয়েল" ইভেন্টের বিষয়ে কথা বলার উত্তরগুলি হতাশ ইভেন্টটিকে উল্লেখ করছে। স্ট্যান্ডার্ড ইভেন্টটি সহজভাবে "চাকা"। Https://developer.mozilla.org/en-US/docs/Web/References/Events/wheel দেখুন

Comments

আমি এগুলি চেষ্টা করে দেখেছি: "হুইল" ফায়ারফক্স এবং আইই তে কাজ করে তবে ক্রোম নয়। "মাউসওয়েল" ক্রোম এবং আইই তে কাজ করে তবে ফায়ারফক্সে নয়। "ডোমমাউসস্ক্রোল" কেবল ফায়ারফক্সে কাজ করে।

— কার্টিস ইয়ালাপ

ওহ, এটি আমার অনেক সময় বাঁচিয়েছিল। ধন্যবাদ!

— গুস্তাভোহেনকে

দেখে মনে হচ্ছে যে ক্রোম 2013 এর আগস্টে "হুইল" এর জন্য সমর্থন যুক্ত করেছে: Code.google.com/p/chromium/issues/detail?id=227454

— স্টারহাউস

সাফারি এখনও হুইল ইভেন্টটি সমর্থন করে না।

— থায়নে

আপনার ডকুমেন্টেশন যেমন বলেছে, wheelইভেন্টটি একই জিনিস Edge নয় এমনটি সমর্থন করে IE। ক্যানিউজ

— অ্যালেক্স

Answer 6

এটি আমার জন্য কাজ করেছে :)

 //Firefox
 $('#elem').bind('DOMMouseScroll', function(e){
     if(e.originalEvent.detail > 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

 //IE, Opera, Safari
 $('#elem').bind('mousewheel', function(e){
     if(e.originalEvent.wheelDelta < 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

স্ট্যাকওভারফ্লো থেকে

Answer 7

এখানে একটি ভ্যানিলা সমাধান। JQuery ব্যবহার করা যেতে পারে যদি ইভেন্টটি ফাংশনটির কাছে চলে যায় event.originalEventযা jQuery jQuery ইভেন্টের সম্পত্তি হিসাবে উপলব্ধ করে। অথবা ভিতরে যদি callbackফাংশন আমরা প্রথম লাইন সামনে যোগ অধীনে: event = event.originalEvent;।

এই কোডটি চক্রের গতি / পরিমাণকে স্বাভাবিক করে তোলে এবং একটি সাধারণ মাউসে একটি ফরোয়ার্ড স্ক্রোল কী হবে তার জন্য ইতিবাচক এবং পিছনে মাউস হুইল চলাচলে নেতিবাচক।

ডেমো: http://jsfiddle.net/BXhzD/

var wheel = document.getElementById('wheel');

function report(ammout) {
    wheel.innerHTML = 'wheel ammout: ' + ammout;
}

function callback(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);
    }
    report(normalized);
}

var event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
window.addEventListener(event, callback);

এছাড়াও jQuery এর জন্য একটি প্লাগইন রয়েছে যা কোডে আরও ভার্বোজ এবং কিছু অতিরিক্ত চিনির রয়েছে: https://github.com/brandonaaron/jquery-mousewheel

Answer 8

এটি প্রতিটি আইই, ফায়ারফক্স এবং ক্রোমের সর্বশেষ সংস্করণে কাজ করছে।

$(document).ready(function(){
        $('#whole').bind('DOMMouseScroll mousewheel', function(e){
            if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
                alert("up");
            }
            else{
                alert("down");
            }
        });
    });

Answer 9

আমি আজ এই সমস্যাটিতে আটকে গিয়েছিলাম এবং খুঁজে পেয়েছি যে এই কোডটি আমার পক্ষে ঠিক কাজ করছে

$('#content').on('mousewheel', function(event) {
    //console.log(event.deltaX, event.deltaY, event.deltaFactor);
    if(event.deltaY > 0) {
      console.log('scroll up');
    } else {
      console.log('scroll down');
    }
});

Answer 10

এই কোড ব্যবহার করুন

 knob.bind('mousewheel', function(e){  
 if(e.originalEvent.wheelDelta < 0) {
    moveKnob('down');
  } else {
    moveKnob('up');
 }
  return false;
});

Answer 11

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

var header = $("#header");
$('#content-container').bind('mousewheel', function(e){
    if(e.originalEvent.wheelDelta > 0) {
        if (header.data('faded')) {
            header.data('faded', 0).stop(true).fadeTo(800, 1);
        }
    }
    else{
        if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0);
    }
});

উপরেরটি টাচ / মোবাইলের জন্য অনুকূলিত নয়, আমি মনে করি এটি সমস্ত মোবাইলের জন্য এটি আরও ভাল করে:

var iScrollPos = 0;
var header = $("#header");
$('#content-container').scroll(function () {

    var iCurScrollPos = $(this).scrollTop();
    if (iCurScrollPos > iScrollPos) {
        if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0);

    } else {
        //Scrolling Up
        if (header.data('faded')) {
            header.data('faded', 0).stop(true).fadeTo(800, 1);
        }
    }
    iScrollPos = iCurScrollPos;

});

Answer 12

প্লাগ-ইন করে @DarinDimitrov পোস্ট, jquery-mousewheel, jQuery এর 3+ সঙ্গে নষ্ট হয়ে গেছে । jquery-wheelJQuery 3+ এর সাথে কাজ করে এমনটি ব্যবহার করা আরও পরামর্শ দেওয়া হবে ।

আপনি যদি jQuery রুটে যেতে না চান, এমডিএন mousewheelঘটনাটি অমানুষিক এবং অনেক জায়গায় অসমর্থিত হওয়ায় ইভেন্টটি ব্যবহার করার জন্য অত্যন্ত সাবধান করে । পরিবর্তে এটি বলেছে যে আপনিwheel যে মূল্যবোধগুলি বোধ করছেন ঠিক তার চেয়ে অনেক বেশি স্পষ্টতা পাওয়ার কারণে আপনার ইভেন্টটি ব্যবহার করা উচিত । এটি বেশিরভাগ প্রধান ব্রাউজার দ্বারা সমর্থিত।

Answer 13

যদি উল্লিখিত jquery মাউসওয়েল প্লাগইন ব্যবহার করে থাকেন , তবে ইভেন্ট হ্যান্ডলার ফাংশনের 2 য় আর্গুমেন্টটি কী ব্যবহার করবেন - delta:

$('#my-element').on('mousewheel', function(event, delta) {
    if(delta > 0) {
    console.log('scroll up');
    } 
    else {
    console.log('scroll down');
    }
});

Answer 14

আমি যেখানে $(window).mousewheelফিরে আসছিলাম সম্প্রতি একই সমস্যা পেয়েছি undefined

আমি যা করেছি তা ছিল $(window).on('mousewheel', function() {});

এটি প্রক্রিয়া করার জন্য আরও আমি ব্যবহার করছি:

function (event) {
    var direction = null,
        key;

    if (event.type === 'mousewheel') {
        if (yourFunctionForGetMouseWheelDirection(event) > 0) {
            direction = 'up';
        } else {
            direction = 'down';
        }
    }
}

Comments

নতুন ইউটিলিটিস.জেটমুহস

— হুইল

এটি এই প্রশ্নের সুযোগের বাইরে। সুতরাং এটি কপি পেস্ট ওয়েবসাইট নয়।

— সিজমন টোদা