خصوصیت از touch-action

سلام دوست من، یه کم مفصله انشالا که حوصله داری و میخونی و به دردت میخوره

خاصیت touch-action به ما این امکان رو میده که فعل و انفعالات اینتر اکتیو صفحه ی لمسی رو کنترل کنیم تقریبا مشابه pointer-events که بیشتر برای موس استفاده میشه حالا این برای حرکت لمس صفحه ست

این خاصیت در درجه ی اول برای رابط کاربری تعاملی خیلی مفیده ولی نمیشه که رفتاری که با موس داریم با تاچ هم داشته باشیم، پس برای همین این رو آوردن توی سی اس اس، که بتونیم حالت ها رو با وقتی از موس استفاده میشه تمایز بدیم، مثلا اگه تا حالا به نقشه کار کرده باشی توی بروزر، وقتی با گوشی لمس میکنیم، اگه ضربه بزنیم زوم میشه یا اگه سریع بکشیم حرکت صفحه لختی داره و سریع جابه جا میشه یا بهتر بگم شوت میکنیم این ور اون ور صفحه رو، همه ی اینا با خاصیت touch-action تنظیم میشه

مثلا ما اگه یه باکسی داشته باشیم که داخل اون اسکرول بخوره، میتونیم با استفاده از دستور :

touch-action : auto; به مرورگر بفهمونیم که کاربر میتونه با تاچ این پنل رو اسکرول کنه، یا حتی میتونیم محدودش کنیم در یه مسیر خاص، با این مقادیر : pan-x یا pan-y و یا حتی میتونیم کلا غیر فعالش کنیم با مقدار none

حالت کلی نوشتن این خاصیت این شکلیه:

touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation

مقادیری که میتونه بگیره این ها هستن:

• auto : به مرورگر اجازه میده تا همه تعاملهای صفحه رو بزرگنمایی و کنترل کنه.
•  none : کلا این خاصیت رو غیر فعال میکنه و دست رو برای جاوا اسکریپت باز میذاره تا بتونیم با اون شخصی سازی کنیم
•  pan-x : اجازه میده صفحه رو با یه انگشت در راستای افقی جا به جا کنیم که این حالت کوتاه شده ی pan-left  و pan-right  هست که البته میشه یه کم پیچیده تر و اختصاصی تر با pan-y یا pan-up , pan-down هم نوشت
•  pan-y این هم مثل قبلی منتها در راستای عمود رو کنترل میکنه
•  manipulation : حالت زوم و بزرگ نمایی با دو انگشت رو فعال میکنه ولی بقیه حالت های پیشفرضی که برای زوم هست رو غیر فعال میکنه مثل دابل تپ برای زوم توی بعضی گوشی ها
•  pan-left (آزمایشی): یه سری حالات رو فعال میکنه که وقتی کاربر به چپ بکشه صفحه به راست بره
•  pan-right (Experimental): این هم مثل قبلی در مورد راست
•  pan-down (Experimental): و همینطور پایین
•  pan-up (Experimental): و این هم بالا
•  pinch-zoom : حالت تعامل چند انگشتی برای زوم رو فعال میکنه و میتونه با بقیه ی مقادیر ترکیب بشه 

انشالا که یه کم تونسته باشم برات روشن کنم که این touch-action چیه

منبع