8

Eu tenho duas div de mesma altura, mas com conteúdos distintos. E quando eu fizer o scroll em uma, eu queria que a outra acompanhasse na mesma (ou ao menos próxima da mesma) posição.

O problema é que os conteúdos delas não possuem o mesmo tamanho, e consequentemente o tamanho da barra de rolagem acaba ficando diferente entre elas. Mas mesmo com a diferença de tamanho eu gostaria de fazer o scroll da segunda acompanhar o da primeira, de forma que se eu rolasse até o final da primeira div a segunda também deveria ir para o final, mesmo sendo de conteúdo maior.

Não sei se consegui ser claro, mas aqui segue um exemplo do que eu pretendo fazer.

(function () {
    var target = $("#target")[0]; // <== Getting raw element
    $("#source").scroll(function () {
        target.scrollTop = this.scrollTop;
        target.scrollLeft = this.scrollLeft;
    });
})();

Eu utilizei uma solução encontrada nesta resposta, mas o problema é justamente que o scroll da segunda só vai até onde o da primeira termina, ou seja, ele não se comporta da forma devida.

Existe alguma forma de criar um scroll-espelho "inteligente"?

5
  • Você quer que o scroll seja feito proporcionalmente, certo? 7/05/2014 às 16:42
  • @GuilhermeOderdenge Exato, acabei encontrando um site que tem um exemplo bem próximo ao que eu quero: dillinger.io - Estou dando uma olhada no código dele, mas qualquer resposta com uma solução ainda é muito bem vinda
    – Kazzkiq
    7/05/2014 às 16:44
  • 1
    Veja se te ajuda: scripterlative.com/files/synchdivscroll.htm 7/05/2014 às 16:45
  • 1
    Me lembrou o StackEdit.io.
    – brasofilo
    7/05/2014 às 17:06
  • @brasofilo esse site que você passou é exatamente o que eu queria, vou dar uma bisbilhotada no repositório dele, valeu!
    – Kazzkiq
    7/05/2014 às 17:30

1 Resposta 1

5

Uma ideia aproximada seria utilizar percentuais. Primeiro você precisa saber quantos px o scroll source se moveu para baixo, para isso fazemos a seguinte regra de 3:

scrollTopSource = x
(scrollHeigthSource - clientHeigthSource) = 100
x = 100 * scrollTopSource / (scrollHeigthSource - clientHeigthSource)

Depois, temos que converter essa porcentagem para px no target, para isso utilizaremos a seguinte regra 3:

scrollTopTarget = x
(scrollHeigthTarget - clientHeigthTarget) = 100
scrollTopTarget = (scrollHeigthTarget - clientHeigthTarget) * x / 100

No código bastaria substituir as seguintes linhas do

target.scrollTop = 100 * this.scrollTop / this.scrollTop;
target.scrollLeft = 100 * this.scrollLeft / this.scrollWidth;

pelas linhas a seguir:

target.scrollTop = (target.scrollHeight-this.clientHeight) * (100 * this.scrollTop / (this.scrollHeight-this.clientHeight)) / 100;
target.scrollLeft = (target.scrollWidth-this.clientWidth) * (100 * this.scrollLeft / (this.scrollWidth-this.clientWidth)) / 100;

Como pode ser visto nesse jsfiddle, ele precisa de algum ajuste para corrigir problemas de arredondamento quando a barra de rolagem chega ao final.

1
  • 2
    Apesar deste script não ser tão preciso quanto o do StackEdit.io (comentado pelo @brasofilo), ele functiona muito bem e resolve a minha dúvida. Obrigado.
    – Kazzkiq
    7/05/2014 às 18:31

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 .