การเลื่อน (สครอลล์) องค์ประกอบใน JavaScript

คุณสมบัติต่อไปนี้เก็บค่าที่แสดงว่าองค์ประกอบถูกเลื่อนไปมากน้อยเพียงใด:

javascriptconsole.log(elem.scrollTop);  // จากด้านบน
console.log(elem.scrollLeft); // จากด้านซ้าย

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

Задание 1

กำหนดองค์ประกอบและปุ่ม จากการกดปุ่ม จงหาว่าองค์ประกอบถูกเลื่อนในแนวตั้งไปมากน้อยเพียงใด

Задание 2

กำหนดองค์ประกอบและปุ่ม จากการกดปุ่ม จงตรวจสอบว่าองค์ประกอบถูกเลื่อนในแนวตั้งหรือไม่

Задание 3

เลื่อนองค์ประกอบไปจนสุด กดปุ่ม เพื่อให้แสดงค่าปริมาณการเลื่อนทั้งหมด

Задание 4

รับค่า scrollHeight ขององค์ประกอบ แล้วลบด้วยปริมาณการเลื่อนทั้งหมด (จากโจทย์ก่อนหน้า) ผลลัพธ์ที่ได้คืออะไร? และมีขนาดอะไรบ้าง?

Задание 5

นำ offsetHeight และปริมาณการเลื่อนทั้งหมดมาบวกกัน แล้วลบผลรวมนั้นออกจากค่า scrollHeight ผลลัพธ์เป็นตัวเลขอะไร?