Karn Tirasoontorn

March 31, 2021

ว่าด้วยเรื่องของ Infinite Scroll

ต่อจากบทความ Pagination with Pagy ก็พยายามจะนำ Pagy มาใช้ในโปรแกรมใบลา โดยส่วนหนึ่งของโปรแกรมจะมีการแสดงข้อมูลประวัติการลาซึ่งทำเป็น pagination แบบ infinite scroll เริ่มแรกนั้นเราพยายามจะใช้ Turbo เข้ามาใช้ในการแสดงผล และใช้ Stimulus ร่วมกับ IntersectionObserver ตามไอเดียจากบทความ Adventure in infinite scrolling  

ผลลัพท์ที่ได้ก็ได้อย่างที่ต้องการ ดังแสดงในภาพด้านล่าง แต่โค้ดที่ออกมานั้นไม่ค่อยจะสวยเท่าไหร่ สังเกตได้จากการที่โค้ด turbo-frame ซ้อนๆ กันไปเรื่อยๆ ซึ่งแต่ละ turbo-frame จะเป็นข้อมูลของแต่ละหน้า รวมถึงเมื่อทำการรีเฟรชหน้าจอข้อมูลก็ไปเริ่มที่หน้าแรกใหม่ทุกครั้ง


เมื่อเป็นดังนี้ก็ต้องศึกษาหาวิธีใหม่ที่จะทำให้ infinite scroll ดีกว่านี้ และในเวอร์ชันล่าสุดก็สามารถทำให้โค้ดเราดูดีขึ้นโดยข้อมูลของแต่ละหน้าจะถูกรวบและจัดการให้อยู่ภายใต้ turbo-frame หลักเพียงตัวเดียวเท่านั้น นอกจากนี้เมื่อทำการรีเฟรชหน้าเว็บสามารถแสดงหน้าปัจจุบัน และตำแหน่งปัจจุบันที่ scroll ไปได้อีกด้วย


inspector_2.png


สำหรับโค้ดในฝั่ง Stimulus ก็จะประมาณนี้

import { Controller } from "stimulus"
export default class extends Controller {  
  static targets = ["nextPageLink"]
  connect() {    
    if (this.hasNextPageLinkTarget) {      
      this.observeNextPageLink() 
    }  
  }
  
  observeNextPageLink() {    
    let options = {      
      root: null,      
      rootMargin: "300px 0px 0px 0px",      
      threshold: 0,    
    }
    
    let observer = new IntersectionObserver(([ entry ], observer) => {      
      if (entry.isIntersecting) {
         this.nextPageLinkTarget.click()      
         observer.disconnect()     
      }      
    }, options)
    observer.observe(this.nextPageLinkTarget)
  }
}