Menu Auto Scroll Horizontal Mobile com Widget List do Elementor + JavaScript

<script>
document.addEventListener('DOMContentLoaded', function() {
    const menu = document.querySelector('#lista-menu-mobile');
    const links = document.querySelectorAll('#lista-menu-mobile .elementor-icon-list-item a');
    const navList = document.querySelector('#lista-menu-mobile .elementor-icon-list-items');

    // Pixels extras antes do header encostar no container
    const activationOffset = 60;

    // Mapeia seções pelo ID do href
    const sections = Array.from(links).map(link => {
        const id = link.getAttribute('href').replace('#', '');
        return document.getElementById(id);
    }).filter(Boolean);

    function onScroll() {
        const menuHeight = menu.offsetHeight;
        let activeSection = null;

        sections.forEach(section => {
            const rect = section.getBoundingClientRect();

            // Ativa apenas se o topo já passou pelo header+offset
            // E se o bottom ainda está visível (a seção não acabou completamente)
            if (rect.top <= menuHeight + activationOffset && rect.bottom > menuHeight + activationOffset) {
                activeSection = section;
            }
        });

        // Atualiza os links
        links.forEach(link => link.classList.remove('active'));

        if (activeSection) {
            const navLink = document.querySelector(`#lista-menu-mobile a[href="#${activeSection.id}"]`);
            if (navLink) {
                navLink.classList.add('active');

                // Centraliza o item ativo no scroll horizontal do menu
                const linkRect = navLink.getBoundingClientRect();
                const navListRect = navList.getBoundingClientRect();
                const centerPosition = (navListRect.width / 2) - (linkRect.width / 2);
                const leftPosition = linkRect.left + navList.scrollLeft - navListRect.left - centerPosition;

                navList.scroll({
                    left: leftPosition,
                    behavior: 'smooth'
                });
            }
        }
    }

    // Escuta o scroll
    window.addEventListener('scroll', onScroll);

    // Executa no carregamento
    onScroll();
});
</script>

<style>
	#lista-menu-mobile {
		margin-left: -10px;
		margin-right: -10px;
		min-width: calc(100% + 20px) !important;
	}

	#lista-menu-mobile .elementor-icon-list-items {
		overflow-x: scroll;
		display: flex !important;
		flex-wrap: nowrap !important;
		-webkit-overflow-scrolling: touch;
		padding: 0 40px 0 10px !important;
		scrollbar-width: none; /* Para Firefox */
		justify-content: center;
	}

	#lista-menu-mobile .elementor-icon-list-items::-webkit-scrollbar {
		display: none; /* Para Chrome, Safari e outros navegadores WebKit */
	}

	#lista-menu-mobile .elementor-icon-list-item {
		flex: 0 0 auto; 
	}
	
	#lista-menu-mobile .elementor-icon-list-item a {
		background: #fff;
    padding: 16px 24px;
    border-radius: 100px;
    color: var( --e-global-color-a8c99e1 );
    transition: all linear .2s;
	}
	
	#lista-menu-mobile .elementor-icon-list-item a:hover,
	#lista-menu-mobile .elementor-icon-list-item a.active {
		background: var( --e-global-color-accent );
    color: #fff !important;
    transition: all linear .2s;
	}
	
	@media (max-width: 1024px) {
		#lista-menu-mobile .elementor-icon-list-items {
			justify-content: flex-start;
		}
	}
</style>