post

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

Publicado em: 20/02/2024 / Atualizado em: 27/02/2024

Categorias: BlogCSSElementorJavaScript (JS)JSWordpress

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:

image 21

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

image 24

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:

image 22

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.

Bruno Devs News


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.

Clique aqui e entre em contato