พร็อพเพอร์ตี้ touch-action CSS ช่วยให้นักพัฒนาซอฟต์แวร์จํากัดวิธีที่ผู้ใช้โต้ตอบกับองค์ประกอบได้ ซึ่งเป็นประโยชน์อย่างยิ่งในการป้องกันการส่งเหตุการณ์เมื่อไม่จําเป็น
ก่อนเวอร์ชัน 55 Chrome รองรับ pan-x และ pan-y ซึ่งจํากัดองค์ประกอบให้เลื่อนไปในทิศทางเดียว
วิดีโอด้านล่างแสดงตัวอย่างองค์ประกอบที่ไม่มีการกำหนดการโต้ตอบด้วยการสัมผัส (ซ้าย) รวมถึงการเลื่อนในแนว x และแนว y (กลางและขวา)
CSS สำหรับ Screencast ช่วงกลางและขวาประกอบด้วย
.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