أنت وأنا أعلم أن إضافة أحداث عجلة الماوس إلى صفحات الويب HTML5 يمكن أن تسمح للمستخدمين بشكل أفضل بالتفاعل مع صفحات الويب. في HTML5 ، لا يمكن لعجلة تمرير الماوس أن تنزلق لأعلى ولأسفل فقط في صفحة الويب. في الواقع ، يمكنك أيضًا الاعتماد على هذا لإكمال المزيد من الوظائف ، مثل توسيع وتقليل مجال طائرة العرض.
تحقق من تأثير العرض التوضيحي الفعلي
تدعم معظم المتصفحات أحداث عجلة الماوس ، بحيث يمكنك الاشتراك في طريقة حدث عجلة الماوس أولاً. كلما تم تشغيل الحدث ، يمكنك الحصول على خاصية تسمى Wheeldelta ، والتي تمثل حجم عجلة الماوس التي تغيرت للتو. تشير القيمة الإيجابية إلى أن عجلة التمرير تنزلق إلى أسفل ، وتشير القيمة السالبة إلى أن عجلة التمرير تنزلق. كلما زادت القيمة المطلقة للقيمة ، زاد نطاق الانزلاق.
لسوء الحظ ، لا يزال هناك متصفح لا يدعم أحداث عجلة الماوس. هذا هو Firefox. قامت Mozilla بتنفيذ معالجة حدث يسمى DommesCroll ، والذي سيمرر معلمة حدث تسمى الحدث مع خاصية تسمى التفاصيل. ومع ذلك ، تختلف خاصية التفاصيل هذه عن Wheeldelta ، والتي يمكن أن تُرجع فقط قيمًا إيجابية ، أي أنه يمكن أن يصر فقط على قيمة تمرير عجلة الماوس لأسفل.
يجب أن تولي اهتمامًا خاصًا بأن Apple تم تعطيل التمرير للماوس للتحكم في الصفحة التي تنزلق لأعلى ولأسفل في متصفح Safari ، ولكن هذه الوظيفة لا تزال تستخدم بشكل طبيعي في محرك WebKit ، وبالتالي فإن الكود الذي تكتبه لن يؤدي إلى أي مشاكل.
أضف طريقة معالجة أحداث عجلة الماوسأولاً ، نضيف صورة إلى صفحة الويب ، ويمكننا استخدام عجلة الماوس للتحكم في تكبير هذه الصورة لاحقًا.
XML/HTML رمز نسخ المحتوى إلى الحافظة