3

Tenho duas divs, as duas possuem o mesmo id, target1.

Preciso pegar duas divs no JavaScript e aplicar uma função no evento do scroll da div1. Essa função será responsável por pegar o valor do scroll da div1 e aplicar no scroll da div2. O resultado final seria scrollar a div1 e a div2 scrollar igualmente acompanhando a div1.

Eu consegui fazer funcionar tendo os id's diferentes, com target1 e target2.

function scrollSincronizado(){ 	
$( "#target1" ).scroll(function() { 		
    $("#target2").animate( 		
    {
      scrollTop: $("#target1").scrollTop()+"px" 		
    }, 0); 	
  }); 
}

Mas como preciso considerar que as duas divs possuem o mesmo id, então cheguei nesse ponto:

function scrollSincronizado() {
    var array = $('*[id*=target1]'); //Retorna um array com todos elementos com o id target1
    var t1 = array[0];
    var t2 = array[1];

    //no console imprime o elemento com os dados completo
    console.log(t1);
    console.log(t2);

    //nao executa a funcao no scroll da div, porque?
    t1.scroll(function () {
        console.log("entrou na funcao");
        t2.animate({scrollTop: t1.scrollTop() + "px"}, 0);
    });
}

Esse é o HTML final, de teste:

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<div id="123">
    <div id="target1" onscroll="scrollSincronizado()" style="overflow: scroll; width: 200px; height: 100px;">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
    </div>
</div>

<div id="456">
    <div id="target1" style="overflow: scroll; width: 200px; height: 100px;">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
    </div>
</div>
</body>
</html>

As minhas dúvidas são:

  1. O que estou fazendo de errado?
  2. Como poderia pegar essas duas divs e fazer esses scrolls sincronizado pelo JavaScript?
3
  • 1
    Luan, é incorreto usar o mesmo id em mais de uma div. Utilize class em vez disso.
    – Sam
    Commented 28/08/2018 às 18:21
  • Por que é considerado errado/ruim repetir uma ID em HTML?
    – Syzoth
    Commented 28/08/2018 às 18:30
  • Sim, eu sei que é errado, mas infelizmente no cenário que tenho aqui não tenho como mudar isso. Testei usando class como sugerido mas o resultado foi o mesmo, sem sucesso. Commented 28/08/2018 às 18:30

1 Resposta 1

3

Não use o mesmo id em mais de um elemento na página (veja aqui uma documentação sobre id). Utilize class em vez disso.

No seu caso, além de trocar as ids por class, faltou usar a notação $() do jQuery para manipular os elementos da array (t1 e t2 para $(t1) e $(t2), respectivamente). Com as classes em cada elemento, você pode selecioná-los com $('.target1').

Veja:

function scrollSincronizado(){
	var array = $('.target1'); //Retorna um array com todos elementos com a class target1
	var t1 = array[0];
	var t2 = array[1];
	
	//no console imprime o elemento com os dados completo
//	console.log(t1);
//	console.log(t2); 
	
	//nao executa a funcao no scroll da div, porque?
	$(t1).scroll(function() {
		//console.log("entrou na funcao");
   	$(t2).animate({scrollTop: $(t1).scrollTop()}, 0);
	});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="123">
  	  <div class="target1" onscroll="scrollSincronizado()" style="overflow: scroll; width: 200px; height: 100px;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		  </div>
	  </div>

  <div id="456">
    <div class="target1" style="overflow: scroll; width: 200px; height: 100px;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>

Edit

Não é nem necessário usar a função .animate. Você pode usar o método .scrollTo, o que é mais interessante porque não irá ter que processar o .animate do jQuery toda vez que fizer o scroll:

$(t1).scroll(function() {
   console.log("entrou na funcao");
   t2.scrollTo(0, $(t1).scrollTop());
});

Neste caso, por ser o .scrollTo uma função do JavaScript, não precisa incluir a variável t2 no $().

Exemplo:

function scrollSincronizado(){
	var array = $('.target1'); //Retorna um array com todos elementos com o id target1
	var t1 = array[0];
	var t2 = array[1];
	
	//no console imprime o elemento com os dados completo
//	console.log(t1);
//	console.log(t2); 
	
	//nao executa a funcao no scroll da div, porque?
	$(t1).scroll(function() {
		//console.log("entrou na funcao");
		t2.scrollTo(0, $(t1).scrollTop());
	});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="123">
  	  <div class="target1" onscroll="scrollSincronizado()" style="overflow: scroll; width: 200px; height: 100px;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		  </div>
	  </div>

  <div id="456">
    <div class="target1" style="overflow: scroll; width: 200px; height: 100px;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>

3
  • Muito obrigado, funcionou. Em relação ao id das div's, tenho conhecimento sobre isso, concordo que id é um identificador único e é preciso seguir essa regra, infelizmente não tenho como mudar os id's, mas vou tentar usar a opção de class se possível. Commented 28/08/2018 às 18:35
  • De nada cara. Dá uma olhada na edição da resposta. Creio que seja ainda melhor.
    – Sam
    Commented 28/08/2018 às 18:40
  • Sim, perfeito, irei aplicar, mais uma vez obrigado. Commented 28/08/2018 às 18:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .