DIV activating scroll in another DIV even with different sizes

Question

I have two div same height, but with different content. And when I do scroll in one, I wanted the other to follow in the same (or at least close to the same) position.

The problem is that their contents are not the same size, and consequently the size of the scroll bar ends up being different between them. But even with the size difference I would like to make the scroll of the second accompany that of the first, so that if I rolled until the end of the first div the second should also go to the end, even if it is of larger content.

I don’t know if I could be clear, but here follows an example of what I intend to do.

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

I used a solution found in this answer, but the problem is precisely that the scroll the second only goes as far as the first one ends, that is, it does not behave properly.

Is there any way to create a "smart scroll-mirror"?

Answer 1

An approximate idea would be to use percentages. First you need to know how many px the scroll source moved down, so we make the following rule of 3:

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

Then we have to convert that percentage to px in the target, for this we will use the following rule 3:

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

In the code, simply replace the following lines of javascript

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

by the lines below:

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;

As can be seen in this jsfiddle, it needs some adjustment to fix problems rounding when the scroll bar reaches the end.