التعامل البرمجي مع دولاب الفأرة (Mouse Wheel)

تتوجه المواقع وتطبيقات الويب نحو التشبه بتطبيقات سطح المكتب (Desktop Applications) لما للأخيرة من سهولة في الاستخدام والانتشار. الكثير من المستخدمين يستخدمون دولاب الفأرة هذه الايام للتكبير أو السحب وإلى ما هنالك. نرى هذا التوجه في مواقع مثل خرائط غوغل وإضافات برمجية مثل إيمج فلو.

التعامل البرمجي مع دولاب الفأرة (Mouse Wheel)

المصدر: getwired

احببنا ان نقدم هذه الطريقة البرمجية البسيطة للتعامل معه.

حساب مسافة التمرير

var wheelDistance = function(evt){
    if (!evt) evt = event; // IE
    var w = evt.wheelDelta,
    d = evt.detail; //firefox
    if (d) {
        if w) {
            return w; // 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
    }
};

لنلق نظرة على المتحولات المستخدمة:

  • evt : هو متحول يمثل الحدث على الصفحة
  • wheelDelta :  تستخدم على انترنت اكسبلولر وهي تمثل المسافة والاتجاه الذي يتحرك بها الدولاب
  • detail : نفس ال wheelDelta ولكن تستخدم لفيرفوكس

ربما تتساءلون ماهي هذه الارقام 3 و 120. هي ال WHEEL_DELTA وهي قيمة ثابتة لكل مستعرض توضع من قبل الشركة المبرمجة. في فيرفوكس هي 3 لذلك نقسم القيمة على 3 لكي نعلم كم دورة دولاب قمنا بها، نفس الشيء لإنترنت إكسبلولر ولكن القيمة الثابتة هي 120 اي انه عندما تكون الفيمة 3 هذا يعني ان الدولاب دار بالاتجاه الموجب دورة واحدة وعندما تكون 6 هذا يعني ان الدولاب دار بالاتجاه الموجب دورتين وهكذا….

معرفة جهة التدوير

var wheelDirection = function(evt){
    if (!evt) evt = event;
    if (evt.detail < 0 || evt.wheelDelta > 0)
        return 1;
    return -1;
};

اذا كنا نقوم بالتدوير باتجاه شاشة جهازنا فستكون القيمة موجبة وسالبة في الاتجاه الآخر.

عرض النتائج

يقوم هذا التابع بتنفيذ التوابع وعرض النتائج ضمن عنصر يملك معرف ID هو results.

var results = document.getElementById('results');
function showResults(evt){
    var distance = wheelDistance(evt);
    var direction = wheelDirection(evt);
    results.innerHTML = "event.wheelDelta: "+evt.wheelDelta+"<br>event.detail: "+evt.detail+"<br>Normalized Wheel Distance: "+distance+"<br>Wheel Direction: "+direction;
}

ربط الحدث

لتنفيذ تجربتنا يجب ربط أحد عناصر الصفحة بحدث استخدام الدولاب ليستدعي التابع السابق ليقوم بدوره بتنفيذ تابعي حساب المسافة والاتجاه وعرض النتائج. ليكن العنصر المطلوب له معرف ID هو test.

var test = document.getElementById('test');
if (test.addEventListener){
    test.addEventListener( 'mousewheel', showResults, false ); // Chrome/Safari/Opera
    test.addEventListener( 'DOMMouseScroll', showResults, false ); // Firefox
} else if (test.attachEvent) {
    test.attachEvent('onmousewheel',showResults); // IE
}

تلاحظون الفرق بين المستعرضات في ربط الحدث، قد يفيد في استخدام مكتبات مثل jQuery لتلافي الفروق بين المستعرضات.

كلمة أخيرة

أرجو ان يكون الموضوع مفيداً لكم. يمكنكم تجربة درسنا وتحميل المثال من هذه الصفحة.

محمد نورس البغدادي

من مواليد دمشق بدأ عمله في دمشق كمطور مواقع انترنت ثم انتقل الى دبي. يعمل كمطور واجهات للمواقع الالكترونية ومطور تطبيقات للاجهزة اللوحية.

مواضيع الكاتبموقع الكاتب

لمتابعة الكاتب:
TwitterFacebookLinkedInGoogle Plus

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *