การเช็คตำแหน่งว่า user scroll ลงมาถึงล่างสุดของ div แล้วหรือยังใน React(JavaScript)

อันนี้เป็นโน้ตจากการที่ผมพยายามทำแชทให้แอดมินใช้ตอบลูกค้าครับ ที่อยากได้คือลิสรายชื่อที่เวลาเราเลื่อนลงมาลงสุดแล้วให้มันโหลดรายชื่อเพิ่มเหมือนของ Facebook นั่นแหละ ผมก็เลยค้นหาและลองจนใช้งานได้แล้วก็เอามาแปะไว้ในนี้ด้วย กันลืม เวลาจะใช้ครั้งต่อไปจะได้หาง่ายๆ

อันนี้ผมเขียนแยกเป็น Child Component แยกไว้ต่างหาก ที่มันรับ props มาจาก Parent Component อีกทีเพื่อมา render รายการที่เราต้องการอีกที โดยตัว div หรือ li ที่เราต้องการจัดการเป็นแบบนี้

<div onScroll={handleScroll}>รายการอยู่ในนี้<div>

ตัวฟังก์ชั่นเป็นแบบนี้

const handleScroll = (e) => {
   let bottom = e.target.scrollHeight - Math.ceil(Math.abs(e.target.scrollTop)) === e.target.clientHeight;
   if (bottom) {
            console.log('reach bottom');
            setPosition(position+20);
            props.updateLastCustomer(position);
            console.log('position is ', props.lastCustomer);            
            
   }
}