同步跨度和textarea的滚动条 - 滚动条微客和粘贴问题

Question

我在下面的方式建立了一个表，包含跨度和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> 

随着我有以下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> 

我想要做的是有跨度的滚动条和textarea的滚动条同步起来。我有点做到了这一点使用onscroll事件侦听器与下面的代码：

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

这将在某种程度上实现了我也想，与跨度约为线关闭的，它应该是。我遇到的最大问题是当我将大量文本粘贴到textarea中时。这几乎完全不起作用，两个滚动条都完全关闭，直到我在其他滚动条尝试跟另一个滚动条赶上之前将其中一个滚动条向下放置了很长一段时间。

有什么建议吗？对于这个问题，我应该尝试一种更好的方法吗？任何帮助，将不胜感激。

Answer 1

这可能工作：

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部分：

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

完整的HTML代码是here。