0

我按以下方式设置了一个表格，每个单元格都包含一个跨度和一个文本区域： 

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

我想要做的是让 span 的滚动条和 textarea 的滚动条同步。我使用 onscroll 事件侦听器和以下代码在某种程度上实现了这一点：

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

这在一定程度上实现了我想要的效果，跨度大约偏离了它应该在的位置。我遇到的最大问题是当我将大量文本粘贴到文本区域时。这几乎完全不起作用，两个滚动条都完全关闭，直到我按住其中一个滚动条很长一段时间，然后另一个滚动条将尝试赶上另一个滚动条。

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

4

1 回答 1

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 代码在这里。

于 2012-07-09T18:48:40.113 回答