Závislé scrollbary u HTML elementů - když se vertikálně scroluje s jedním, zároveň se automaticky scroluje i v druhém (samozřejmě v poměru vzhledem k výšce (obsahu)).

readme.md

Závislé scrollbary u HTML elementů - když se vertikálně scroluje s jedním, zároveň se automaticky scroluje i v druhém (samozřejmě v poměru vzhledem k výšce (obsahu)).

Pro fungující navázání event handlerů v příkladu vyžaduje mini-JS-knihovnu Jasno (https://github.com/janpecha/jasno). Lze nahradit voláním addEventListener() (v Opeře, FF, Chrome,... ne v IE).

Live demo: http://janpecha.iunas.cz/demos/scrollbars/

scrolltest.html

<script src="jasno.js"></script>
<table>
<tr>
<td>
<div style="height: 7em; width: 100%; overflow: auto" id="ta1">
some text<br>some text<br>
some text<br>some text<br>
some text<br>some text<br>
some text<br>some text</div>
</td>

<td>
<textarea id="ta2" style="height: 10em; width: 100%; overflow: auto">
some text<br>
some text<br>

some text<br>
some text<br>

some text<br>
some text<br>

some text<br>some text
</textarea>
</td>
</tr>
</table>

<p>See <a href="https://gist.github.com/janpecha/6204837">https://gist.github.com/janpecha/6204837</a>.</p>

<script>
function scrollBy(el1, el2) {
	if(typeof el1.scrollByPreventEvent !== 'undefined' && el1.scrollByPreventEvent === true)
	{
		el1.scrollByPreventEvent = false;
		return;
	}
	
	el1Height = Math.max(el1.scrollHeight - el1.clientHeight, 0);
	el2Height = Math.max(el2.scrollHeight - el2.clientHeight, 0);
	
	if(el1Height && el2Height) // pokud jeden z nich nema scrollBar => neni kam scrollovat
	{
		el2.scrollByPreventEvent = true; // nastaveni scrollTop totiz vyvola onScroll event
		// dalsi moznosti reseni viz http://stackoverflow.com/questions/1386696/make-scrollleft-scrolltop-changes-not-trigger-scroll-event
		el2.scrollTop = el1.scrollTop * (el2Height / el1Height);
	}
}

var el1 = document.getElementById('ta1');
var el2 = document.getElementById('ta2');

Jasno.addEvent(el1, 'scroll', function() {
	scrollBy(el1, el2);
});

Jasno.addEvent(el2, 'scroll', function() {
	scrollBy(el2, el1);
});
</script>