simultaneously scrolling textareas

<html>
<head>
<title> http://stackoverflow.com/questions/11399630/synchronizing-span-and-textarea-scrollbars-scrollbar-slightly-off-and-pasting </title>
<style type="text/css">

span {
    width:93%;
    height: 100%;
}

textarea {
    width:92%;
    height: 100%;
    border-style:solid;
    border-color:black;
    border-width:2px;
    font-size:13px;
}

table {
    width:100%;
    height:100%;
}

.title {
    height:5%;
    text-align:center;
    background-color:#009;
    color:white;
}

#ogline {
    padding-top:4px;
    overflow:auto;
    font-size:12px;
    line-height:14.99px;
    width:6%;
}

</style>

<script type="text/javascript">
<!--

var scrolling=false;

function og_scroll(el)
{
    if (scrolling && el!=scrolling) {
        return;
    }
    scrolling = el;
    var textareas = document.getElementsByTagName('textarea');
    for (var i=0; i<textareas.length; i++) {
        if (textareas[i].id.indexOf('og')==0) {
            textareas[i].scrollTop=el.scrollTop;
        }
    }
    scrolling = false;
}

function up(num)
{
    var area = document.getElementById('og'+num);
    if (area.scrollTop > 0) {
        area.scrollTop -= 15;
    }
    //console.log(area);
}

function down(num)
{
    var area = document.getElementById('og'+num);
    if (area.scrollTop < area.scrollHeight) {
        area.scrollTop += 15;
    }
}


function fix_mouse_scroll() {
    var textareas = document.getElementsByTagName('textarea');
    for (var i=0; i<textareas.length; i++) {
        if (textareas[i].id.indexOf('og')==0) {
            if ("onmousewheel" in document) {
                textareas[i].onmousewheel = fixscroll;
            } else {
                textareas[i].addEventListener('DOMMouseScroll', fixscroll, false);
            }
        }
    }
}

function fixscroll(event){
    var delta=event.detail? event.detail : event.wheelDelta; // positive or negative number
    delta = delta>0 ? 15 : -15;
    event.target.scrollTop += delta;
    //console.log(delta, ' with ',event.target.scrollTop);
}

//-->
</script>

</head>

<body onload="fix_mouse_scroll();">
<table>
<tr><td class="title">Original File</td></tr>
<tr><td> <span onmousedown='up(1)'>[UP]</span> <span onmousedown='down(1)'>[DOWN]</span> <textarea id='og1' onscroll="og_scroll(this);"></textarea></td></tr>
<tr><td> <span onmousedown='up(2)'>[UP]</span> <span onmousedown='down(2)'>[DOWN]</span> <textarea id='og2' onscroll="og_scroll(this);"></textarea></td></tr>
<tr><td> <span onmousedown='up(3)'>[UP]</span> <span onmousedown='down(3)'>[DOWN]</span> <textarea id='og3' onscroll="og_scroll(this);"></textarea></td></tr>
</table>
</body>

</html>