HTMLElement.offsetHeight คือการวัดซึ่งรวมถึงเส้นขอบขององค์ประกอบ ช่องว่างภายในแนวตั้งขององค์ประกอบ แถบเลื่อนแนวนอนขององค์ประกอบ (หากมีอยู่ หากแสดงผล) และความสูงของ CSS ขององค์ประกอบ HTMLElement.scrollHeight คือการวัดความสูงของเนื้อหาขององค์ประกอบ รวมถึงเนื้อหาที่ไม่สามารถมองเห็นได้บนหน้าจอเนื่องจากการล้น ค่าที่ส่งคืนโดย HTMLElement.scrollHeight จะรวม padding-top และ padding-bottom แต่จะไม่รวมเส้นขอบองค์ประกอบหรือแถบเลื่อนแนวนอนขององค์ประกอบ

นี้เพจและหน้านี้เป็นแหล่งที่มาของฉัน

เอกสาร MDN ยังมีรูปภาพเพื่อสาธิตอีกด้วย

ดังที่ @Csarsam พูด ความสูงออฟเซ็ตคือความสูงของเส้นขอบกล่อง (ฉันกำลังเขียนคำใหม่) ความสูงของการเลื่อน คือความสูงของเนื้อหาที่เลื่อนได้ ซึ่งโดยทั่วไปจะประกอบด้วยองค์ประกอบหลายรายการ แต่ความสูงของการเลื่อนยังกำหนดไว้บนองค์ประกอบที่ไม่ได้เลื่อนด้วย ดังนั้นจึงไม่มีเนื้อหาที่เลื่อนได้ ในกรณีนี้ (ฉันได้ตรวจสอบแล้ว แต่ฉันไม่มีการอ้างอิงถึงการสำรองข้อมูล) ความสูงของการเลื่อนคือความสูงของเนื้อหา นั่นคือ ไม่รวมระยะขอบและเส้นขอบ แต่เมื่อองค์ประกอบเป็นส่วนหนึ่งของเนื้อหาที่เลื่อนได้ ขอบจะถูกนำมาพิจารณาเพื่อคำนวณความสูงของการเลื่อนของพาเรนต์

ความสูงของการเลื่อนถูกกำหนดไว้ทั้งบนเนื้อหาที่เลื่อนได้และเนื้อหาที่ไม่สามารถเลื่อนได้ นั่นคือสิ่งที่อาจทำให้สับสน

อัปเดต

นี่คือข้อมูลอ้างอิงที่ยืนยันสิ่งที่ฉันได้ตรวจสอบ: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight