Scroll Pagination

คลาสภาษา JavaScript สำหรับทำงานโหลดเนื้อหาในหน้าใหม่อัตโนมัติเมื่อเลื่อนหน้าเว็บลงมา หรือที่รู้กันในชื่อที่เรียกว่า infinite scroll.

ความสามารถ

• โหลดเนื้อหาโดยใช้ AJAX โดยอัตโนมัติเมื่อเลื่อนหน้าจอลงมาถึงด้านล่าง.
• เปลี่ยน URL เป็นหน้าที่กำลังดูอยู่. นี่จะช่วยให้เมื่อคุณคลิกกลับมาหรือโหลดหน้านั้นใหม่ (Reload) มันจะเริ่มทำงานจากหน้าที่เคยโหลดแล้วได้เลย.
• มีเหตุการณ์ (event) สำหรับใช้งานต่างๆ เช่น เพื่อนำไปใช้สร้าง HTML แสดงผลรายการได้ด้วยตัวเอง.
• ซ่อนแท็กลูกๆทั้งหมดที่พ้นขอบเขตการแสดงผลไปแล้ว เพื่อเพิ่มประสิทธิภาพบนเบราว์เซอร์จะได้ไม่ทำงานหนักเกินไป.

ตัวอย่าง

<div id="posts-container" class="posts-container"></div>

<script src="src/RundizScrollPagination.js" type="application/javascript"></script>
<script type="application/javascript">
    // on window dom loaded.
    window.addEventListener('DOMContentLoaded', (event) => {
        let scrollPaginationClass;
        // listen on ajax failed, done to render items.
        document.addEventListener('rdScrollPagination.start', (ajaxEvent) => {
            const loadingHtml = '<p class="item-loading">Loading &hellip;</p>';
            document.querySelector('#posts-container').insertAdjacentHTML('beforeend', loadingHtml);
        });
        document.addEventListener('rdScrollPagination.fail', (ajaxEvent) => {
            let loadingElement = document.querySelector('.item-loading');
            if (loadingElement) {
                loadingElement.remove();
            }
        });
        document.addEventListener('rdScrollPagination.done', (ajaxEvent) => {
            let loadingElement = document.querySelector('.item-loading');
            if (loadingElement) {
                loadingElement.remove();
            }

            let response = (ajaxEvent.detail ? ajaxEvent.detail.response : {});

            let listHtml = '';
            if (response.items) {
                response.items.forEach((item, index) => {
                    listHtml += '<div class="each-post-item"><p>' + item + '</p></div>';
                });
            }

            document.querySelector('#posts-container')
                .insertAdjacentHTML('beforeend', listHtml);
            // in some case, you may need to manually call `triggerOnScroll()`.
            scrollPaginationClass.triggerOnScroll();
        });

        // initialize new scroll pagination class.
        scrollPaginationClass = new RundizScrollPagination({
            'containerSelector': '#posts-container',
            'childrenItemSelector': '.each-post-item',
            'changeURL': true,
            'ajaxUrl': 'pagination-dummydata.php?start=%startoffset%'
        });
        // invoke/run the class.
        scrollPaginationClass.invoke();
    });
</script>