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:
- O que estou fazendo de errado?
- Como poderia pegar essas duas divs e fazer esses scrolls sincronizado pelo JavaScript?
id
em mais de uma div. Utilize class em vez disso.