touch-action সিএসএস প্রপার্টি একজন ডেভেলপারকে সীমাবদ্ধ করার অনুমতি দেয় কিভাবে একজন ব্যবহারকারী একটি উপাদানের সাথে ইন্টারঅ্যাক্ট করতে পারে যা ইভেন্টগুলিকে প্রেরণ করা প্রতিরোধ করতে বিশেষভাবে সহায়ক যখন এটি প্রয়োজন হয় না।
সংস্করণ 55 এর আগে, ক্রোম pan-x এবং pan-y সমর্থন করেছিল যা উপাদানগুলিকে এক দিকে স্ক্রল করতে সীমাবদ্ধ করে।
নীচের ভিডিওটি স্পর্শ-অ্যাকশন সংজ্ঞায়িত (বাম), পাশাপাশি প্যান-এক্স এবং প্যান-ওয়াই (মাঝ ও ডান) ছাড়া একটি উপাদানের উদাহরণ দেখায়।
মধ্যম এবং ডান হাতের স্ক্রিন-কাস্টের জন্য CSS হল:
.pan-x {
touch-action: pan-x;
}
.pan-y {
touch-action: pan-y;
}
Chrome 55-এ, pan-left , pan-right , pan-up এবং pan-down যোগ করা হয়েছে। এই বৈশিষ্ট্যগুলির আচরণে একটি সূক্ষ্ম কিন্তু গুরুত্বপূর্ণ পার্থক্য রয়েছে।
এই বৈশিষ্ট্যগুলি ব্যবহারকারীকে উপাদানটির প্রতিক্রিয়া জানানোর আগে এক দিক থেকে অঙ্গভঙ্গি শুরু করতে বাধ্য করে৷ এটি "পুল-টু-রিফ্রেশ" অঙ্গভঙ্গির অনুরূপ যা শুধুমাত্র তখনই সাড়া দেয় যখন ব্যবহারকারী স্ক্রিনে নিচের দিকে অঙ্গভঙ্গি করে।
নীচের ভিডিওটি pan-right এবং pan-down প্রদর্শন করে যার জন্য যথাক্রমে ডান থেকে বাম এবং নীচে থেকে উপরে শুরু করার জন্য অঙ্গভঙ্গি প্রয়োজন। একবার অঙ্গভঙ্গি শুরু হয়ে গেলে, আপনি আসলে সামনে পিছনে প্যান করতে পারেন। এটি শুধুমাত্র প্রাথমিক দিক প্রভাবিত হয়।
যদিও ভিডিওটি এই আচরণটি প্রদর্শন করে, আপনি নমুনাটি পরীক্ষা করে নিজেকে চেষ্টা করা আরও সহজ মনে করতে পারেন।
এই ডেমোর জন্য CSS হল:
.pan-right {
touch-action: pan-right;
}
.pan-down {
touch-action: pan-down;
}
টাচ-অ্যাকশনের জগতে শেষ যে জিনিসটি ঘটছে তা হল pinch-zoom সম্পত্তি। এটি Chrome 55-এ একটি পতাকার পিছনে একটি নতুন সম্পত্তি, যেটি যেকোনো প্যান বিকল্পের সাথে ব্যবহার করা যেতে পারে (যেমন pan-x , pan-y , pan-left , pan-right , pan-down , pan-up )।
আপনি যদি একটি ওয়েবসাইটে চিমটি করেন তবে এটি সাধারণত পৃষ্ঠাগুলির সামগ্রীতে জুম ইন করবে৷ একটি touch-action সংজ্ঞায়িত করা এই আচরণকে প্রতিরোধ করবে, কিন্তু চিমটি-জুম যোগ করলে এই আচরণটি পুনরায় সক্রিয় হবে।
এই ভিডিওটি touch-action: pan-x এবং touch-action: pan-x pinch-zoom ;
এই সমস্ত বৈশিষ্ট্যগুলিকে এমন কিছু যুক্তি সরল করা উচিত যা অন্যথায় pointer-events ব্যবহার করে বিকাশকারীদের দ্বারা প্রয়োগ করতে হবে।