This project provides a basic implementation of virtual scrolling in a Lightning Web Component (LWC) using a single component. Virtual scrolling optimizes the performance of web applications working with large datasets by rendering only the visible portion of the data, reducing initial load time, and improving user experience.
- Single Component: Implements virtual scrolling within a single Lightning Web Component.
- Efficient Rendering: Renders only the visible portion of the data, reducing the number of DOM elements and improving performance.
- Smooth Scrolling: Allows smooth scrolling through large datasets without delays.
- Clone the Repository: Clone this repository to your local machine.
- Deploy the Component: Use the Salesforce CLI to deploy the
virtualScrollLightning Web Component to your Salesforce org.
To use the virtualScroll component in your Lightning page, include it like any other LWC:
Drop this Lightning Web Component into your Home or App page.
You can configure the virtual scrolling behavior by adjusting the following attributes of the virtualScroll component:
- Item Height: The height of each item in the list. Adjust this value based on your item's visual size.
- View Height: The height of the scrolling viewport. Adjust this value based on the size of the area where the list is displayed.
- Total Records: The total number of records in the dataset. Ensure this value matches the actual number of records to enable correct virtual scrolling behaviour.
Please note that this project is a basic demonstration and can be customized further to meet specific requirements.
This project was created as a basic example to demonstrate the implementation of virtual scrolling in Salesforce Lightning Web Components. It draws inspiration from the GitHub repository lwc-virtual-scroll-sample. I simplified the original example by consolidating it into a single Lightning Web Component.