post
Menu Auto Scroll Horizontal Mobile com Widget List do Elementor + JavaScript
Publicado em: 20/02/2024 / Atualizado em: 27/02/2024
Neste artigo mostro um código personalizado que possibilita criar um menu horizontal que rola sozinho para a esquerda ou direita, quando a página vai descendo.
Isso possibilita que, conforme o usuário vai descendo a tela, e navegando entre as seções, o menu acompanha as seções rolando sozinho e também mudando os itens de cor.
Para isso, precisamos do widget “HTML” e do “Lista de ícones” nativos do Elementor, como mostra abaixo:

Adicione o ID CSS lista-menu-mobile
no seu widget de lista, assim:

Depois disso, fixe o container referente ao menu, para que ele fixe no topo da página e desça junto com o rolar da página, assim:

Adicione o seguinte código abaixo no widget HTML do Elementor:
<script> document.addEventListener('DOMContentLoaded', function() { const observerOptions = { root: null, // observa as interseções com o viewport threshold: 0.2, // dispara quando 20% do elemento está visível }; const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { // Encontra o link correspondente ao ID da seção visível, limitando a busca à div com ID 'lista-menu-mobile' const navLink = document.querySelector(`#lista-menu-mobile a[href="#${entry.target.id}"]`); if (navLink) { // Remove a classe 'active' de todos os links dentro da div 'lista-menu-mobile' document.querySelectorAll('#lista-menu-mobile .elementor-icon-list-item a').forEach(link => { link.classList.remove('active'); }); // Adiciona a classe 'active' ao link visível navLink.classList.add('active'); // Rolagem automática para o link ativo, ajustando para centralizá-lo na lista const navList = document.querySelector('#lista-menu-mobile .elementor-icon-list-items'); const linkRect = navLink.getBoundingClientRect(); const navListRect = navList.getBoundingClientRect(); const centerPosition = (navListRect.width / 2) - (linkRect.width / 2); // Calcula a posição central const leftPosition = linkRect.left + navList.scrollLeft - navListRect.left - centerPosition; // Ajusta para centralizar o link navList.scroll({ left: leftPosition, behavior: 'smooth' }); } } }); }, observerOptions); // Observa cada seção mencionada nos links, limitando a busca à div com ID 'lista-menu-mobile' document.querySelectorAll('#lista-menu-mobile .elementor-icon-list-item a').forEach(link => { const sectionId = link.getAttribute('href').replace('#', ''); const section = document.getElementById(sectionId); if (section) { observer.observe(section); } }); }); </script>
Depois, adicione o seguinte código abaixo no “CSS personalizado” do widget “Lista de ícones”:
@media (max-width: 1024px) { #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: flex-start; } #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-items:after { content: ""; background: linear-gradient(-90deg, #fff, transparent); padding: 12px; right: -1px; position: absolute; } #lista-menu-mobile .elementor-icon-list-items:before { content: ""; background: linear-gradient(90deg, #fff, transparent); padding: 12px; position: absolute; left: -1px; z-index: 1; } #lista-menu-mobile .elementor-icon-list-item a.active * { color: var(--e-global-color-accent) !important; } }
Fazendo isso, seu menu com auto-scroll irá funcionar perfeitamente!
Publicações recomendadas:
Inscreva-se em Nossa News:
Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Link Curto para Compartilhamento
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.
bruno.art.br/pb/4464
ID de Referência: 4464
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.