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