Scroll Element

เลื่อนดูองค์ประกอบบนหน้าเว็บ

รายละเอียดการตั้งค่าภายในบล็อค

1

การเลือกองค์ประกอบบนหน้าเว็บ

• CSS Selector

  • ตัวเลือกนี้เป็นตัวเลือกที่มี รูปแบบการเลือก ที่ใช้ในการกำหนดว่าจะเลือกหรือจับองค์ประกอบ (Elements) ใดบนหน้าเว็บเพจ HTML เพื่อนำไปใช้กำหนดรูปแบบการแสดงผล ผ่าน CSS โดยการเลือกองค์ประกอบ

• XPath

  • เป็นภาษาที่ใช้สำหรับค้นหา และเลือกข้อมูลจาก DOM (Document Object Model) ในเอกสาร XML หรือ HTML บนหน้าเว็บที่สร้างด้วย HTML, XPath จะช่วยให้เราสามารถ เจาะจง element ต่าง ๆ ได้แม่นยำ โดยไม่จำเป็นต้องใช้ ID หรือ Class เพียงอย่างเดียว

• Coordinate

  • เป็นการใช้พิกัด (X, Y) ในการระบุตำแหน่งบนหน้าจอเพื่อทำการคลิก โดยไม่ต้องอิงจาก HTML Elements หรือ XPath ซึ่งเหมาะกับการทำงานในแอปพลิเคชันที่ไม่สามารถเข้าถึง DOM ได้ เช่น โปรแกรมเกม หรือแอปพลิเคชันที่สร้างด้วยเทคโนโลยีที่ไม่รองรับ DOM

2

รูปแบบการเลื่อนหน้าเว็บ

โดยการกำหนดค่าของตำแหน่ง x: horizon, y: vertical

เลื่อนเมาส์: เลื่อนองค์ประกอบไปยังชุดพิกัดที่ระบุ

ตัวเลือกองค์ประกอบ: ระบุตัวเลือกสำหรับองค์ประกอบที่คุณต้องการเลื่อนไปถึง

• ไปยังพิกัดแนวนอน (Horizon) : เลื่อนในแนวนอนไปยังพิกัดที่ผู้ใช้ป้อน

• ไปยังพิกัดแนวตั้ง (Vertical) : เลื่อนในแนวตั้งไปยังพิกัดที่ผู้ใช้ป้อน

3

Scroll into view

เป็นการเลื่อนไปยังองค์ประกอบที่ต้องการโดยอัตโนมัติ

หากเปิดใช้งาน จะไม่สามารถกำหนดค่า Scroll horizontal, Scroll vertical ได้

4

Smooth scroll

คือการเลื่อนหน้าจอที่ดูนุ่มนวล ไม่กระชาก ไม่เร็วหรือช้าเกินไป ทำให้เวลาสไลด์หรือเลื่อนดูเนื้อหาบนเว็บรู้สึกสบายตาและเป็นธรรมชาติมากขึ้น

5

Increment horizontal scroll

คือการตั้งค่าการเลื่อนหน้าจอให้เป็นแนวจากซ้ายไปขวาหรือขวาไปซ้าย ตามแกนนอนของหน้าจอ

6

Increment vertical scroll

คือการตั้งค่าการเลื่อนหน้าจอให้เป็นแนวขึ้นและลง ตามแกนตั้งของหน้าจอ

---

คลิปสอนการใช้งานบล็อค Scroll Element

---