วิธีการเลื่อนหน้าต่างไปยังองค์ประกอบใน JavaScript

เมธอด scrollIntoView จะเลื่อนหน้าต่าง ไปยังองค์ประกอบที่กำหนด โดยนำไปใช้กับ องค์ประกอบที่เราต้องการให้หน้าต่างเลื่อนไปถึง พารามิเตอร์ของเมธอดใช้ควบคุมตำแหน่งที่องค์ประกอบ ควรปรากฏ: ด้านบนของหน้าต่างหรือด้านล่าง

มาดูตัวอย่างกัน เลื่อนหน้าต่างเพื่อให้องค์ประกอบ อยู่ด้านบนของหน้าต่าง:

elem.scrollIntoView(true);

และตอนนี้เลื่อนหน้าต่างเพื่อให้องค์ประกอบ อยู่ด้านล่างของหน้าต่าง:

elem.scrollIntoView(false);

ยังสามารถส่งออบเจ็กต์การกำหนดค่า เป็นพารามิเตอร์ได้ด้วย มาลองเลื่อนหน้าต่าง ไปยังองค์ประกอบอย่างนุ่มนวล:

elem.scrollIntoView({
	behavior: 'smooth',
});

ออบเจ็กต์การกำหนดค่ายังมีตัวเลือก สำหรับการจัดหน้ารายการสัมพันธ์กับองค์ประกอบ ตัวเลือก block กำหนดการจัดแนวในแนวตั้ง และตัวเลือก inline กำหนดการจัดแนวนอน ซึ่งสามารถรับค่าต่อไปนี้: 'start', 'center', 'end', 'nearest'

มาลองดู:

elem.scrollIntoView({
	behavior: 'smooth',
	block: 'start',
	inline: 'end',
});

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