Como criar abas com rolagem horizontal no Elementor
- admin72
No tutorial, será explicado como implementar rolagem horizontal nos títulos das abas do Elementor, sendo eficiente tanto em dispositivos móveis quanto em desktops, se necessário.
Passo 1: Crie as abas
No editor do Elementor, adicione o widget de abas.
Passo 2: Edite as abas
Em configurações adicionais, ative a rolagem horizontal e mude o ponto de interrupção para “nenhum”.
Passo 3: Adicione o código
Adicione um widget de HTML na parte mais inferior de sua página e copie e cole o código abaixo.
Código:
<style>
.e-n-tabs-heading.e-n-tabs-heading.e-n-tabs-heading.e-n-tabs-heading {
overflow-x: auto; /* ativa a rolagem horizontal */
display: flex;
flex-wrap: nowrap;
justify-content: start;
}
.e-n-tabs-heading > .e-n-tab-title{
white-space: nowrap;
}
.e-n-tabs-content .e-n-tab-title {
display: none;
}
/* opcional: ativar rolagem horizontal no desktop */
@media (min-width:1025px){
.e-n-tabs-heading::-webkit-scrollbar-track {
background-color: #dedede;
}
.e-n-tabs-heading::-webkit-scrollbar {
height: 8px;
}
.e-n-tabs-heading::-webkit-scrollbar-thumb {
background-color: #aeaeae;
}
}
/* opcional: título fixo no conteiner */
.e-n-tabs-heading {
position: sticky;
top: 0;
z-index: 9;
}
</style>
<script>
document.addEventListener('DOMContentLoaded',function(){
let scrollableNavigations = document.querySelectorAll('.e-n-tabs-heading');
scrollableNavigations.forEach((scrollableNavigation, index) => {
let navigationItems = scrollableNavigation.querySelectorAll('.e-n-tab-title');
scrollableNavigation.style.scrollBehavior = "smooth";
navigationItems.forEach((navigationItem,i) => {
let scrollToPosition = (navigationItem.getBoundingClientRect().left + navigationItem.offsetWidth/2) - (window.innerWidth/2);
navigationItem.addEventListener('click',function(event){
scrollableNavigation.scrollTo(scrollToPosition, 0);
});
});
});
});
</script>
