Skip to content

Instantly share code, notes, and snippets.

@janpecha janpecha/readme.md
Last active Dec 20, 2015

Embed
What would you like to do?
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)).

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/

<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.