Question

I have a table set up in the following way, with each cell containing a span and a textarea:

<table>
   <tr><td class="title">Original File</td></tr>
   <tr><td><span id='ogline' onscroll="og.scrollTop=scrollTop"></span><span><textarea onscroll="ogline.scrollTop=scrollTop" onkeyup="linenumber()" id='og' onfocusout="linenumber()"></textarea></span></td></tr>
</table>

Along with that I have the following CSS:

<style>
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>

What I am trying to do is have the scroll bar of the span and the scroll bar of the textarea synch up. I’ve somewhat accomplished this using the onscroll event listener with the following code:

onscroll="og.scrollTop=scrollTop"
onscroll="ogline.scrollTop = scrollTop

This has somewhat accomplished what I want it to, with the span being about a line off of where it should be. The greatest problem I am having though is when I paste a large amount of text into the textarea. This almost completely doesn’t work, with both scrollbars being completely off until I hold one of the scrollbars down for a significant amount of time before the other scrollbar will try to play catch up with the other.

Any suggestions? Is there maybe a better approach to this issue that I should try? Any help would be appreciated.

Answer 1

This could work:

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) { // searching for id==og*
            textareas[i].scrollTop=el.scrollTop;
        }
    }
    scrolling = false;
}

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

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);
}

Html part:

<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>

The full html code is here.