JQuery Scroll Lock Demo

This is just a simple demo to show that jQuery and console.log() work when embedded in a Bloopist blog post. Bloopist uses Google Caja to sandbox JavaScript in blog posts so it is safe.

The two boxes below have their scrollbar linked. When you scroll one, the other scrolls automatically to match. If you click the button "print_scroll_one", then some information about the scroll bar position in the top box is printed to your browser's console. The same thing happens for the second box when you click "print_scroll_two". The link "one_to_two" doesn't really do anything. It scrolls the second box to match the first box, but since the boxes are already linked, it's a bit useless.

Source Code

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<div id="one" style="height:100px; overflow-y:scroll">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempus, neque eu dapibus porttitor, libero metus interdum lacus, in blandit neque nisl quis magna. Vivamus sodales vehicula augue, feugiat cursus ante. Sed dapibus cursus luctus. Curabitur euismod gravida felis, vitae varius lectus iaculis eu. Phasellus aliquet sapien at nulla varius finibus. Vivamus tortor libero, aliquam vitae lectus eget, facilisis eleifend lorem. Donec quis hendrerit magna, ac tincidunt sapien. Duis blandit, libero eu cursus aliquam, massa risus malesuada eros, luctus suscipit mi erat id turpis. Nulla vitae bibendum arcu. Curabitur viverra venenatis dictum. Quisque rhoncus pretium purus, sed venenatis velit laoreet ultrices. Proin non convallis felis. Sed ornare nisl nec libero dignissim mattis ut at felis.

Aenean pharetra neque eu ligula feugiat dignissim. Cras imperdiet, purus id iaculis lobortis, urna felis vehicula leo, quis commodo metus eros quis justo. Fusce auctor urna non mattis ornare. Etiam faucibus luctus luctus. Vestibulum dapibus diam nec commodo cursus. Phasellus placerat leo id libero gravida ullamcorper. Ut luctus sagittis ex in ornare. Aliquam erat volutpat. Vivamus lobortis urna feugiat libero ultrices efficitur. Nulla viverra dictum velit, lobortis venenatis sem tempus id. Aliquam tristique elementum viverra. Mauris faucibus porta ligula ac scelerisque.

Vivamus vitae augue pharetra, sollicitudin magna quis, consectetur nibh. In eu tempor elit. Mauris ultrices dapibus neque in laoreet. Donec varius tempor sapien eget dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam id massa ac purus venenatis congue. Maecenas luctus ex eget cursus commodo. Maecenas nibh lacus, aliquam sit amet diam at, interdum interdum lorem. Nam ornare tempor nisi nec mattis. In ut mattis magna. Fusce gravida, lacus ac tristique posuere, orci ante condimentum sem, non feugiat sem felis et libero. Pellentesque vitae arcu auctor, porta ligula gravida, euismod magna. Duis vestibulum diam mauris. Sed sodales, lacus at aliquet pellentesque, dui purus suscipit lectus, ut dignissim lectus metus eget mi.

Aenean mattis pharetra sem, mollis imperdiet libero varius ut. Suspendisse dapibus sapien sit amet libero fringilla, non volutpat augue venenatis. Phasellus urna metus, sollicitudin a libero ac, rhoncus rhoncus turpis. Sed a turpis tristique, vehicula dolor sit amet, bibendum leo. Nam dignissim arcu vitae ligula dapibus, in gravida tellus placerat. Phasellus at felis sed leo bibendum interdum nec ac dui. Curabitur eu dolor massa. Etiam enim velit, sollicitudin sit amet felis eu, dictum maximus ex. Aenean ut quam dolor. Pellentesque luctus dictum risus, quis cursus magna egestas eget. Integer cursus sapien nisi, non pretium lorem hendrerit efficitur.

Nunc molestie sagittis velit, eget auctor erat consectetur non. Mauris a arcu aliquet, euismod nibh quis, pretium augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer eu urna nec orci volutpat posuere. Mauris accumsan sollicitudin leo rhoncus scelerisque. Nullam auctor, purus eu vulputate consequat, risus felis tincidunt neque, quis pellentesque turpis nibh quis lorem. Fusce vel elementum eros. Proin pretium libero sed placerat tempor.</div>

<div id="two" style="height:100px; overflow-y:scroll">課民的止低伊真場碁回社囲。勤治工合件情転平求供員皇暮。率輝済安質文詳佐業身漢囲際内阪。仰結聞涯間応演演玉冊転同戸禁移集。残府無著太断初豊表挙済主入約取略掲志門。投詳和西色渡解健報香都民輩要宝選覧議春国。更品際途接航君価有者竹催福内芸。減族女全約約予混大川権力質真。話加稿択碁百多要約職診竹意番走批。

最道売囲府未央男経文輩求集庄加領今久張前。全新済来電記朝使東度無各神企転朽。活法球緩針満禁荒江海能岡機公録借柴角記。記待罹挙知集交歩提確道世埼装脆料沿。碁医置発交東平極問細軽厚吐。求演書阪意続北更記建索弘南潟隔成喜副浜。大宣国呂間磐様約法康一質水世国菱超権名遠。表捕企愛略乗手季他芸面継。幸見社索定職代阪並朝深携能闘。

景戸開楽僚院似選図記太型。見申左戦割茶済材吉記朝苦。記書極点柱康融徒中外案国当気情。真引社庶台感免首録辞議田治断古出性。郭的議代見会禁情手営素供郎。調菊入者効択端毎向投購挙。演載値月江務聞拉元聞量作会報債族階見魔。芸転多著売現惑真告局古展京待基超激問供諮。済棋法良引権無動支重京高伴高首止持納。自速護阪応様巨属関用権目。

他技点崩会索工導順意朝面。内槻年購隆囲芸画認結来政注統。全進青過市官戦松合由打料程尻。三午刊記流面機九線成行本殺広空明天事引。持界強供照毎民顔三春午正着全右園済古著。開隊商写唆更奏治許採法希図美自計意。要三作交検本機磨全玲武掲閉温年由諸難北食。両学報事市爆担郎火成約長公見告用関。福機堂選国宅万属真覧今国山津衛撃。

近浦還禁東努生事新府児充環竹。新澤態男地本領万結溝博省。不読本告打備動権正賞果知示事済生駄雑完。政域物報千市子世器憲説測視公府夜。勇前景職真著地界投手高元社販年超主底増要。一野政政背作守禁同名時明飛現災届真済医。話播新一米恩水把奔最電内。育待関狂番載題会無職好極害門隊読図通動捷。側夜群意者娘望必告手細強命連難目年暮。</div>


<script>
function print_scroll_one() {
    var y = $("#one").scrollTop();
    console.log("y=" + y);
    var height = $("#one").prop("scrollHeight");
    console.log("height=" + height);
}
function print_scroll_two() {
    var y = $("#two").scrollTop();
    console.log("y=" + y);
    var height = $("#two").prop("scrollHeight");
    console.log("height=" + height);
}
var ignore_scroll = false;
function one_to_two() {
    var y = $("#one").scrollTop();
    console.log("y=" + y);
    var height = $("#one").prop("scrollHeight");
    console.log("height=" + height);
    var percentage = y/height;
    var set_y = percentage * $("#two").prop("scrollHeight");
    ignore_scroll = true;
    $("#two").scrollTop(set_y);
}
function two_to_one() {
    var y = $("#two").scrollTop();
    console.log("y=" + y);
    var height = $("#two").prop("scrollHeight");
    console.log("height=" + height);
    var percentage = y/height;
    var set_y = percentage * $("#one").prop("scrollHeight");
    ignore_scroll = true;
    $("#one").scrollTop(set_y);
}
$( "#one" ).scroll(function() {
  if (ignore_scroll) {
    ignore_scroll = false;
  } else {
    one_to_two();
  }
});
$( "#two" ).scroll(function() {
  if (ignore_scroll) {
    ignore_scroll = false;
  } else {
    two_to_one();
  }
});
print_scroll();
</script>

<p><a href="#" onclick="print_scroll_one();">print_scroll_one</a></p>
<p><a href="#" onclick="print_scroll_two();">print_scroll_two</a></p>
<p><a href="#" onclick="one_to_two();">one_to_two</a></p>

Output

print_scroll_one

print_scroll_two

one_to_two