Hướng Dẫn Tạo Scroll Vô Tận với Next.js 14 và SCSS

Giới thiệu

Trong bài viết này, chúng ta sẽ cùng nhau khám phá cách tạo hiệu ứng scroll vô tận bằng Next.js 14 kết hợp với SCSS. Tính năng này rất hữu ích cho các ứng dụng web cần hiển thị một lượng lớn dữ liệu, chẳng hạn như danh sách sản phẩm hoặc hình ảnh.

Demo

Để xem demo, bạn có thể truy cập liên kết demo.

Vấn đề Khi Sử Dụng Thư Viện

Khi sử dụng thư viện cho trình hiển thị như masonry, bạn có thể gặp phải một số hạn chế về chiều cao của phần tử. Ví dụ, nếu bạn cố gắng hiển thị quá nhiều mục (như 9999 mục hình ảnh), thư viện có thể không hoạt động mượt mà. Để khắc phục điều này, bạn có thể áp dụng một số giải pháp sử dụng SCSS.

Mã SCSS

Dưới đây là mã SCSS mà bạn có thể sử dụng để cải thiện khả năng cuộn của ứng dụng:

scss Copy

.isScrolling {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
}

Hướng Dẫn Sử Dụng

Để bắt đầu, bạn có thể tham khảo đoạn mã mẫu sau đây. Chúng ta sẽ sử dụng một số thư viện như Lodash và React để quản lý tình trạng và hiệu suất của ứng dụng.

javascript Copy

'use client';
import { filter, map, slice } from 'lodash';
import { CSSProperties, Fragment, Suspense, memo, useEffect, useMemo, useState } from 'react';
import styles from './styles.module.scss';

export default memo(function Test() {
    const [limit, setLimit] = useState(50);

    const column = 5;
    const list = map(Array.from({ length: 9999 }).fill(0), (_, idx) => {
        return {
            label: idx,
            image: 'https://source.unsplash.com/random?t=' + idx,
        };
    });

    const columnItems = Array.from({ length: column }, (_, colIndex) =>
        filter(slice(list, 0, limit), (_, index) => index % column === colIndex)
    );

    const handleScroll = () => {
        const boxList = document.getElementById('cover');
        const listItem = document.getElementById('list');

        if (boxList && listItem) {
            if (
                boxList.scrollTop + boxList.clientHeight >= listItem.offsetHeight
            ) {
                setLimit((prev) => prev + 150);
            }
        }
    };

    useEffect(() => {
        window.addEventListener('wheel', handleScroll);

        return () => {
            window.removeEventListener('wheel', handleScroll);
        };
    }, [handleScroll]);

    return (
        <div className={styles.Container}>
            <div className={styles.block}>
                <div className={styles.isScrolling} id="cover">
                    <ul
                        id="list"
                        className={styles.list}
                        style={{ '--column': column } as CSSProperties}
                    >
                        {map(columnItems, (column, columnID) => {
                            return (
                                <Fragment key={columnID}>
                                    <Suspense fallback={<p>Loading...</p>}> 
                                        <RenderColumn column={column} />
                                    </Suspense>
                                </Fragment>
                            );
                        })}
                    </ul>
                </div>
            </div>
        </div>
    );
});

Các Thành Phần Hiển Thị

Dưới đây là cách thức mà từng thành phần trong mã hoạt động:

RenderColumn: Hiển thị các mục trong cột.
RenderRow: Hiển thị các hàng trong cột.
RenderItem: Hiển thị từng mục với hình ảnh và nhãn.

Kết Luận

Với hướng dẫn này, bạn đã biết cách tạo một ứng dụng Next.js 14 có tính năng scroll vô tận sử dụng SCSS và Lodash. Hãy thử nghiệm với mã nguồn và điều chỉnh các thông số để phù hợp với nhu cầu của bạn.
source: viblo

Hướng Dẫn Tạo Scroll Vô Tận với Next.js 14 và SCSS, Tính Năng Tải Thêm