15

私はファイル比較のためにこのコードを持っています：http：//jsfiddle.net/CrN6X/

今、それは私が必要とすることをします：

  1. 垂直方向にのみスクロールする1つの大きなdiv
  2. 水平方向にのみスクロールする2つの小さなダイビング

このようにして、ファイルを非常に簡単に比較できますが、問題が1つあります。一番下のスクロールバーにアクセスできるのは、一番下までスクロールしたときだけです。

それらにアクセスするために他のdivを一番下までスクロールする必要がないように、どうすればそれらをフロートさせたり、スクロールバーを別のdivに移動したりできますか？

4

3 に答える 3

23

この中のjavascriptは本当に必要なものですが、実際に動作するのを確認できるようにhtmlを追加しました。

$("#div1").scroll(function () { 
  $("#div2").scrollTop($("#div1").scrollTop());
  $("#div2").scrollLeft($("#div1").scrollLeft());
});
$("#div2").scroll(function () { 
  $("#div1").scrollTop($("#div2").scrollTop());
  $("#div1").scrollLeft($("#div2").scrollLeft());
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<div id="div1" style="float:left;overflow:auto;height:100px;width:200px;">
  <p>lulz</p>
  <p>lulz</p>
  <p>lulz</p>
  <p>lulz</p>
</div>

<div id="div2" style="float:right;overflow:auto;height:100px;width:200px;">
  <p>lulz</p>
  <p>lulz</p>
  <p>lulz</p>
  <p>lulz</p>
</div>

于 2012-08-20T14:09:38.687 に答える
20

マウスホイールを使用してスクロールするときにスクロールラグの影響を回避するには、2番目のスクロールイベントトリガーを無効にする必要があります。以下の私のアプローチを確認してください：

  var ignoreScrollEvents = false
  function syncScroll(element1, element2) {
    element1.scroll(function (e) {
      var ignore = ignoreScrollEvents
      ignoreScrollEvents = false
      if (ignore) return

      ignoreScrollEvents = true
      element2.scrollTop(element1.scrollTop())
    })
  }
  syncScroll($("#div1"), $("#div2"))
  syncScroll($("#div2"), $("#div1"))
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<div id="div1" style="float:left;overflow:auto;height:100px;width:200px;">
  <p>lulz</p>
  <p>lulz</p>
  <p>lulz</p>
  <p>lulz</p>
</div>

<div id="div2" style="float:right;overflow:auto;height:100px;width:200px;">
  <p>lulz</p>
  <p>lulz</p>
  <p>lulz</p>
  <p>lulz</p>
</div>

于 2018-03-22T03:35:02.200 に答える
2

いいえ、スクロールバーは小さいdivの内側に配置されます。これらのスクロールバーはdivの下部にロックされているため、機能しません。

できることは、大きなdivの下に2つのjavascriptスクロールバーを作成し、デフォルトのスクロールバーを完全に無効にすることです。次に、スクロールバーを常に表示します。さらに1マイル進みたい場合は、スクロールバーを結合して、左右のウィンドウが同じ位置にスクロールできるようにすることで、より良い比較が可能になります。

于 2012-08-20T14:07:25.287 に答える