คุณและฉันรู้ว่าการเพิ่มกิจกรรมล้อเมาส์ไปยังหน้าเว็บ HTML5 สามารถช่วยให้ผู้ใช้สามารถโต้ตอบกับหน้าเว็บได้ดีขึ้น ใน HTML5 ล้อเลื่อนเมาส์ไม่เพียง แต่สามารถเลื่อนหน้าเว็บขึ้นและลงเท่านั้น ในความเป็นจริงคุณยังสามารถพึ่งพาสิ่งนี้เพื่อให้ฟังก์ชั่นเพิ่มเติมเสร็จสมบูรณ์เช่นการขยายและลดสนามของระนาบมุมมอง
ตรวจสอบเอฟเฟกต์การสาธิตที่แท้จริง
เบราว์เซอร์ส่วนใหญ่รองรับกิจกรรมล้อเมาส์ดังนั้นคุณสามารถสมัครสมาชิกวิธีการจัดกิจกรรม Mouse Wheel ก่อน เมื่อใดก็ตามที่เหตุการณ์ถูกเรียกใช้คุณจะได้รับคุณสมบัติที่เรียกว่า Wheeldelta ซึ่งแสดงถึงขนาดของล้อเมาส์ที่เพิ่งเปลี่ยนไป ค่าบวกบ่งชี้ว่าล้อเลื่อนเลื่อนลงและค่าลบบ่งชี้ว่าล้อเลื่อนเลื่อนขึ้น ยิ่งค่าสัมบูรณ์ของค่ามากเท่าใดก็ยิ่งช่วงเลื่อนมากขึ้นเท่านั้น
น่าเสียดายที่ยังมีเบราว์เซอร์ที่ไม่รองรับเหตุการณ์ล้อของเมาส์ นั่นคือ Firefox Mozilla ได้ดำเนินการประมวลผลเหตุการณ์ที่เรียกว่า Dommousescroll ซึ่งจะผ่านพารามิเตอร์เหตุการณ์ที่ชื่อเหตุการณ์ที่มีคุณสมบัติที่เรียกว่ารายละเอียด อย่างไรก็ตามคุณสมบัติรายละเอียดนี้แตกต่างจาก Wheeldelta ซึ่งสามารถส่งคืนค่าบวกเท่านั้นนั่นคือมันสามารถยืนยันค่าของล้อเมาส์ที่เลื่อนลงได้เท่านั้น
คุณควรให้ความสนใจเป็นพิเศษว่า Apple ยังปิดใช้งานการเลื่อนเมาส์เพื่อควบคุมหน้าการเลื่อนขึ้นและลงในเบราว์เซอร์ Safari แต่ฟังก์ชั่นนี้ยังคงใช้ตามปกติในเอ็นจิ้น WebKit ดังนั้นรหัสที่คุณเขียนจะไม่ก่อให้เกิดปัญหาใด ๆ
เพิ่มวิธีการจัดการเหตุการณ์ Mouse Wheelก่อนอื่นเราเพิ่มภาพลงในหน้าเว็บและเราสามารถใช้ล้อเมาส์เพื่อควบคุมการซูมของภาพนี้ในภายหลัง
XML/HTML รหัสคัดลอกเนื้อหาไปยังคลิปบอร์ด