چطور از رویداد mousewheel در جاوا اسکریپت استفاده کنیم؟

عرض سلام و خسته نباشید خدمت تمامی کاربران و دانشجوهای پرتلاش سون لرن.
با یک آموزش در خدمت شما هستم که امیدوارم براتون مفید باشه.
اگر صفحه وب شما از event یا رویداد onmusewheel پشتیبانی کند میتوانید امکانات بیشتری به صفحه تان اضافه کنید.مثلا میتوانید قابلیت زوم کردن روی تصاویر را به صفحه اضافه کنید.

منظور از رویداد onmousewheel استفاده از دکمه گردان وسط موس هست. یک مثال کاربردی از این رویداد هنگام استفاده از Google map هست که شما میتوانید با چرخاندن دکمه اسکرول موس روی نقشه زوم کنید.

ابتدا یک دمو از مثالی که میخواهیم در این آموزش بزنیم ببینید تا با یکی از قابلیت های این رویداد آشنا بشین:

در این آموزش ما با نحوه افزودن قابلیت زوم کردن روی تصویر با استفاده از دکمه اسکرول موس آشنا می شویم.
اکثر مرورگرها از رویداد onmousewheel پشتیبانی میکنند.شما میتوانید این رویداد را روی یک المنت صدا بزنید و با استفاده از ویژگی wheeldelta از این رویداد استفاده کنید.
wheeldelta برای اسکرول به سمت بالا یک مقدار مثبت(120+) و برای اسکرول به سمت پایین یک مقدار منفی(120-) را برمیگرداند. هرچه این مقدار بزرگتر یا کوچکتر باشد میزان حرکت نیز بیشتر خواهد بود.
متاسفانه یک مرورگر هست که از رویداد onmousewheel پشتیبانی نمیکند.
فایرفاکس به جای این رویداد یک رویداد به نام DOMMouseScroll اجرا میکند.
رویداد DOMMouseScroll یک ویژگی به نام detail را به همراه دارد که برخلاف ویژگی wheelDelta یک مقدار مثبت(1+) برای اسکرول به سمت پایین را برمیگرداند.
بنابراین تا زمانی که موزیلا از رویداد onmousewheel پشتیبانی نکند ما برای استفاده از این رویداد در صفحه مان با یک وضعیت غیر معمولی مواجه هستیم. همچنین باید توجه کنید که اپل scroll wheel را در مرورگرهای سافاری غیر فعال کرده اما در مرورگرهای بر پایه webkit پشتیبانی از این رویداد هست بنابراین کد شما بدون هیچ مشکلی کار خواهد کرد.

اضافه کردن رویداد onmousewheel:

در ابتدا یک تصویر را به صفحه اضافه میکنیم تا با استفاده از onmousewheel در این تصویر زوم به سمت داخل یا به سمت بیرون داشته باشیم:

و در مرحله بعد ما میتوانیم رویداد onmousewheel رابه تصویرمان اضافه کنیم تا به این طریق به خاصیت
wheeldelta و detail در مرورگر فایرفاکس دسترسی داشته باشیم و با استفاده از مقدار این ویژگی ها بفهمیم که کاربر به کدام سمت اسکرول کرده و اگر به سمت بالا اسکرول کرده باشد مقدار این ویژگی ها مثبت هست درنتیجه ما در تصویر به سمت داخل زوم میکنیم تا تصویر بزرگتر شود ولی اگر مقدار این ویژگی ها منفی بود میفهمیم که کاربر میخواهد به سمت بیرون زوم کند و درنتیجه تصویر را به همان اندازه که موس را به سمت پایین چرخانده کوچکتر میکنیم:

در خط اول شی تصویرمان که میخواهیم درآن زوم کنیم را گرفتیم و بعد گفتیم که اگر مرورگرمان از تابع
addEventListener پشتیبانی میکرد برای مرورگرهای به غیر از فایرفاکس رویداد mousewheel و برای مرورگر فایرفاکس رویداد DOMMouseScroll را به تصویرمان اضافه کن و اگر مرورگرمان از تابع addEventListener
پشتیبانی نمیکرد(مرورگرهای اینترنت اکسپلورر ورژن 9 به پایین) هم رویداد onMouseWheel را به تصویر اضافه کن و در صورت رخ دادن رویداد mousewheel یا استفاده از دکمه گردان موس ، تابع MouseWheelHandler
را اجرا کن.

تابع کنترل کننده رویداد  (MouseWheelHandler) mousewheel:

تابع mousewheelhandler الان میتواند مقدار حرکت چرخش موس را تعیین کند.درواقع الان میتوانیم در یک تابع به مقادیری که حرکت دکمه گردان موس برمیگرداند دسترسی داشته باشیم و از آنها استفاده کنیم.
اما اول باید ناهماهنگی که بین مرورگر فایرفاکس و بقیه مرورگرها در رویداد mousewheel وجود دارد را اصلاح کنیم و کاری کنیم که برای همه مرورگرها فقط یک مقدار داشته باشیم تا کار ما آسانتر شود.

ما باید مقدار detail که در مرورگر فایرفاکس برگردانده میشود را معکوس کنیم تا برای همه مرورگرها به طور یکسان بتوانیم عمل کنیم.باید کاری کنیم که در مرورگر فایرفاکس هم با چرخش دکمه گردان موس مقدار مثبت برای چرخش به سمت بالا و مقدار منفی برای چرخش به سمت پایین داشته باشیم.پس به صورت زیر عمل میکنیم:

در ابتدا با استفاده از e.preventDefault رویداد پیشفرض اسکرول در مرورگر ها را متوقف کردیم تا زمانی که از دکمه اسکرول موس روی تصویر استفاده میکنیم صفحه به صورت پیش فرض اسکرول نخورد.و بعد مقدار detail را منفی کردیم تا معکوس شود و با mousewheel هماهنگ شود همچنین کاری کردیم که اگر mousewheel برابر 120+ بود مقدار 1 و اگر 120- بود مقدار 1- برگردانده شود تا در نهایت فقط دو مقدار درهمه مرورگرها داشته باشیم(1+برای اسکرول به سمت بالا و 1-برای اسکرول به سمت پایین).

خب الان ما میتوانیم با استفاده از مقداری که delta برمیگرداند (1+ یا 1-) اندازه عکس را تعیین کنیم.
مثلا در کد زیر ما تعیین کردیم که با اسکرول خوردن روی تصویر اندازه عرض تصویر ما بین 50 تا 800 پیکسل تغییر کند:

در واقع ما مقداری که متغیر دلتا دارد را در عدد 30 ضرب کردیم که اگر دلتا مثبت بود مقدار 30 پیکسل به عرض تصویرمان اضافه میشود و اگر دلتا منفی بود همین مقدار از عرض تصویر کم میشود در نتیجه تصویر کوچکتر دیده میشود. مقدار عددی که میخواهیم در هر بار استفاده از mousewheel به عرض تصویرمان اضافه یا کم شود همین مقدار 30 میباشد که شما میتوانید به دلخواه آن را تغییر دهید.
همچنین با استفاده از Math.min تعیین کردیم که در صورت اسکرول بیش از حد کاربر به سمت بالا اندازه تصویر ما بیشتر از 800 پیکسل بزرگ نشود و با استفاده از Math.max هم تعیین کردیم که تصویر مان کوچکتر از 50 پیکسل نشود و با این کار اسکرول به سمت پایین کاربر را محدود کردیم.
در نهایت ما مقدار false را برمی گردانیم تا رویداد استاندارد و پیش فرض اسکرول صفحه را هنگامی که اشاره گر موس کاربر روی تصویر قرار دارد متوقف کنیم.
این کد در همه مرورگر ها به خوبی کار میکند حتی در اینترنت اکسپلورر 6 ، 7 یا 8 به جز مرورگر سافاری.
امیدوارم که از این رویداد کاربردی بتونین در پروژه هاتون استفاده کنین.

- - , .