# 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](https://abi.sshop.live/masonry). ### 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 .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 '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 (

); }); ``` ### 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: 1. **RenderColumn**: Hiển thị các mục trong cột. 2. **RenderRow**: Hiển thị các hàng trong cột. 3. **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

Bài viết về chủ đềLoadmore

Tổng hợp các bài viết về Loadmore

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

Chủ đề phổ biến

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