ขนาดของหน้าต่างโดยคำนึงถึงส่วนที่เลื่อนใน JavaScript

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

ความสูงโดยคำนึงถึงส่วนที่เลื่อน:

let scrollHeight = Math.max(
	document.body.scrollHeight, document.documentElement.scrollHeight,
	document.body.offsetHeight, document.documentElement.offsetHeight,
	document.body.clientHeight, document.documentElement.clientHeight
);

console.log(scrollHeight);

ความกว้างโดยคำนึงถึงส่วนที่เลื่อน:

let scrollWidth = Math.max(
	document.body.scrollWidth, document.documentElement.scrollWidth,
	document.body.offsetWidth, document.documentElement.offsetWidth,
	document.body.clientWidth, document.documentElement.clientWidth
);

console.log(scrollWidth);

เมื่อคลิกปุ่ม ให้แสดง ความสูงโดยคำนึงถึงส่วนที่เลื่อน

เมื่อคลิกปุ่ม ให้แสดง ความกว้างโดยคำนึงถึงส่วนที่เลื่อน

เมื่อคลิกปุ่ม ให้แสดง ความสูงของส่วนที่ซ่อนอยู่ใต้การเลื่อน