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>

私がやろうとしているのは、スパンのスクロールバーとテキストエリアのスクロールバーを同期させることです。次のコードで onscroll イベントリスナーを使用して、これをある程度達成しました。

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

これにより、スパンが本来あるべき場所から約1行ずれて、私が望んでいたことがある程度達成されました。私が抱えている最大の問題は、大量のテキストをテキストエリアに貼り付けたときです。これはほとんど完全に機能しません.一方のスクロールバーが他方のスクロールバーに追いつく前に、一方のスクロールバーをかなりの時間押し続けるまで、両方のスクロールバーが完全にオフになります.

助言がありますか？私が試すべきこの問題へのより良いアプローチはありますか？どんな助けでも大歓迎です。

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 に答える