How to create an infinite menu scroll

Add paragraph text. Click “Edit Text” to customize this theme across your site. You can update and reuse text themes.

Add paragraph text. Click “Edit Text” to customize this theme across your site. You can update and reuse text themes.

import wixData from 'wix-data';
import wixLocation from 'wix-location';
const START_LOADING_NEXT = 4;
let menuPages = [];

$w.onReady(function () {
    $w('#menuRepeater').rendered && initSideMenu();
});

async function initSideMenu() {
    $w('#menuRepeater').data = [];
    $w('#menuRepeater').onItemReady(($item, itemData, index) => {
        $item('#menuItemText').text = itemData.title;
        $item('#menuItem').onViewportEnter(() => {
            if (index > 1 && index % START_LOADING_NEXT === 0) {
                concatItems();
            }
        });
    });
    $w('#menuItem').onClick((event) => {
        const itemId = event.context.itemId;
        let item = $w('#menuRepeater').data.find(item => item._id === itemId);
        wixLocation.to(item.link);
    });
    setMenuPages();
}

async function setMenuPages() {
    const query = await wixData.query('MenuPages').find();
    const pages = query.items;
    const menuItems = pages.map(item => {
        item._id = `${item._id}`;
        return item;
    });
    $w('#menuRepeater').data = menuItems;
    for (let i = 0; i < menuItems.length; i++) {
        menuPages[i] = { title: menuItems[i].title, link: menuItems[i].link }
    }
    concatItems();
}

function concatItems() {
    let menuRepeater = $w('#menuRepeater');
    let newItems = menuPages.map(item => {
        return { ...item, _id: Math.random().toString().replace('.', '') }
    });
    menuRepeater.data = menuRepeater.data.concat(newItems);
}