要写两个带行号的textarea,求教如何实现滚动条的同步滚动...

我在做简单的网页文本编辑器...两个带行号的textarea,并排排列,,如何实现滚动条的同步滚动?...
目的是拖动$('sign')的时候$('txt')跟着滚动相同高度...拖动$('txt')的时候$('sign')也跟着滚动相同高度....
要求代码兼容 opera9x & firefox2 ,,无视IE....
<script language="javascript">
function $(id){return document.getElementById(id);}
/*sign rows*/
function signRow(){
if ($('txt').value != ''){
var x=$('txt').value.split('\n'); var y='';
for (var i=0;i<x.length;i++){y=y+(i+1)+'\n';}
$('sign').value=y.replace(/\n$/,'');void(0);}
}
</script>
<textarea id="sign" name="sign" cols="4" rows="14" wrap="off" readonly="1" onDblClick="signRow();" onscroll="$('txt').scroll(0,this.scrollHeight)" style="background:#d0d0d0;"></textarea>
<textarea id="txt" name="txt" cols="81" rows="14" wrap="off" onscroll="$('sign').scroll(0,this.scrollHeight)"></textarea>

解决方案 »

  1.   

    简单的写了下 ，只测试了ff和ie， 应该是可以的吧 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> New Document </title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /></head>
    <body>
    <script language="javascript">function $(id){return document.getElementById(id);}function transfer()
    {
    var s = $("sign");
    var t = $("txt"); var tValue = t.value.split("\n");
    var sValue = []; for (var i=1;i<tValue.length+1 ;i++ )
    {
    sValue.push(i +".\n");
    } s.value = sValue.join("").toString();
    }
    function scroll(current ,other)
    {
    $("oom").innerHTML = current.scrollTop;
    $(other).scrollTop = current.scrollTop;
    }
    </script>
    <p>
    <span id="oom">0</span>
    </p>
    <p>
    <textarea id="sign" name="sign" cols="4" rows="14" wrap="off" readonly="1" style="background:#d0d0d0;" onscroll="scroll(this ,'txt')"></textarea>
    <textarea id="txt" name="txt" cols="81" rows="14" wrap="off" onkeyup="transfer()" onscroll="scroll(this ,'sign')"></textarea>
    </p>
    </body>
    </html>
      

  2.   

    楼上大哥...你这个在ff上也没法实现两个textarea的同步滚动阿....你是ff2么??
    其实我主要是要兼容op9x...我一般只用op...不用ie和ff...
    还有就是不需要onkeyup...那样编辑文本的时候一直在计算,,效率太低了...只在需要行号的时候onDblClick就行了...
      

  3.   

    <textarea id="sign" name="sign" cols="4" rows="14" wrap="off" readonly="1" onDblClick="signRow();" onmousemove="$('txt').scrollTop=$('sign').scrollTop;" onmouseup="$('txt').scrollTop=$('sign').scrollTop;" style="background:#d0d0d0;"></textarea>
    <textarea id="txt" name="txt" cols="81" rows="14" wrap="off" onmousemove="$('sign').scrollTop=$('txt').scrollTop;" onmouseup="$('sign').scrollTop=$('txt').scrollTop;"></textarea><br>做出来了.....原来是scrollTop属性...而不是scrollHeight...
      

  4.   

    为了提高代码效率节省资源又改进了一下...
    <textarea id="sign" name="sign" cols="4" rows="14" wrap="off" readonly="1" onDblClick="signRow();" onmouseup="$('txt').scrollTop=$('sign').scrollTop;" style="background:#d0d0d0;text-align:right;"></textarea>
    <textarea id="txt" name="txt" cols="81" rows="14" wrap="off" onmouseup="$('sign').scrollTop=$('txt').scrollTop;"></textarea>