Skip to content

Instantly share code, notes, and snippets.

@boxofrad
Created April 16, 2012 08:14
Show Gist options
  • Save boxofrad/2397041 to your computer and use it in GitHub Desktop.
Save boxofrad/2397041 to your computer and use it in GitHub Desktop.
Mirror scrolling of 2 differently sized HTML elements
function mirrorScroll(el1, el2) {
var el1TotalHeight = el1[0].scrollHeight;
var el2TotalHeight = el2[0].scrollHeight;
var totalHeightRatio = el2TotalHeight / el1TotalHeight;
var el1WindowHeight = el1.height();
var el2WindowHeight = el2.height();
var windowHeightRatio = el2WindowHeight / el1WindowHeight;
var el1PixelsScrolled = el1.scrollTop();
var el1PercentageScrolled = (el1PixelsScrolled / el1TotalHeight) * 100;
var el2PercentageToScroll = (el1PercentageScrolled * totalHeightRatio);
var el2PixelsToScroll = (el2TotalHeight / 100) * (el2PercentageToScroll * windowHeightRatio);
el2.scrollTop(el2PixelsToScroll);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment