2

この投稿を見てコピーしようとしましたが、機能しませんでした- スクロールの同期

div、bmrDetailDataDiv、およびresidentDetailDataDivを持つ2つのタブを持つTabContainerがあります。

これが私のjavscriptコードです-

window.onload = function () {
  var bmrDetailDiv = $("div[id$='_bmrDetailDataDiv']")[0];
  var residentDetailDiv = $("div[id$='_residentDetailDataDiv']")[0];

  if ((bmrDetailDiv) && (residentDetailDiv)) {
      bmrDetailDiv.on('scroll', function () {
          residentDetailDiv.scrollTop(bmrDetailDiv.scrollTop());
      });

      residentDetailDiv.on('scroll', function () {
          bmrDetailDiv.scrollTop(residentDetailDiv.scrollTop());
      });
}

私は何かが足りないのですか？

編集 -

これを試してエラーが発生しました-

$(document).ready(function () {
   var bmrDetailDiv = $("div[id$='_bmrDetailDataDiv']");
  var residentDetailDiv = $("div[id$='_residentDetailDataDiv']");
  if (bmrDetailDiv.length && residentDetailDiv.length) {
      bmrDetailDiv.on('scroll', function () {
          residentDetailDiv.scrollTop($(this).scrollTop()); 
      });
      residentDetailDiv.on('scroll', function () {
          bmrDetailDiv.scrollTop($(this).scrollTop());
      });
  } 
});

編集＃2-

これを試してもJScriptエラーが発生します。これはすべて、ページの上部に含まれている私の.jsファイル内にあります。-

jQuery.fn.exists = function () { return this.length > 0; }

$(function () {
    var combined = $("div[id$='_bmrDetailDataDiv']").add($("div[id$='_residentDetailDataDiv']"));

    if (combined.exists()) {
        //Getting error on below line
        combined.on("scroll", function () {
          combined.scrollTop($(this).scrollTop());
    });
  }
});
4

3 に答える 3

3

常にコンソールを確認してください。ネイティブ要素でjQueryメソッドを使用しようとしているため（を介して取得したため[0]）、エラーが発生します。純粋に条件のためにこれを行っていた場合は、必要はありません。セレクターで見つかった要素を確認するには、プロパティifを照会するだけです。length

$(function() {
    var bmrDetailDiv = $("div[id$='_bmrDetailDataDiv']");
    var residentDetailDiv = $("div[id$='_residentDetailDataDiv']");

    if (bmrDetailDiv.length && residentDetailDiv.length) {

        bmrDetailDiv.on('scroll', function () {
            residentDetailDiv.scrollTop($(this).scrollTop());
        });
        residentDetailDiv.on('scroll', function () {
            bmrDetailDiv.scrollTop($(this).scrollTop());
        });

    }
});

その他の変更：

1）代わりにドキュメントレディハンドラーwindow.onload

2）$(this)内部イベントコールバックの使用

于 2012-07-30T14:51:45.387 に答える
0

必要なことを行う簡単な方法：

ライブデモ：http： //jsfiddle.net/oscarj24/gqHyW/1/

jQuery.fn.exists = function(){return this.length>0;}

$(function() {
    var combined = $("div[id$='_bmrDetailDataDiv']").add($("div[id$='_residentDetailDataDiv']"));

    if (combined.exists()) {
        combined.on("scroll", function () {
            combined.scrollTop($(this).scrollTop());
        });
    }
});​

完全なコード

index.htmとして保存します:-)

<html>
<head>
<title>Synchronizing scrolling between 2 divs</title>
</head>
<style>
  div {
    position : absolute;
    top      : 0;
    width    : 50%;
    height   : 300px;
  }
  .top {
    overflow : hidden;
    left     : 0;
  }
  .bottom {
    left     : 50%;
    overflow : scroll;
  }​
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
jQuery.fn.exists = function(){return this.length>0;}

$(function() {
    var combined = $("div[id$='_bmrDetailDataDiv']").add($("div[id$='_residentDetailDataDiv']"));

    if (combined.exists()) {
        combined.on("scroll", function () {
            combined.scrollTop($(this).scrollTop());
        });
    }
});​
</script>
<body>
  <div id="1_bmrDetailDataDiv" class="top">
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>10th P Tag</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>20th P Tag</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>30th P Tag</p>
  </div>
  <div id="2_residentDetailDataDiv" class="bottom">
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>10th P Tag</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>20th P Tag</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>30th P Tag</p>
  </div>​
</body>
</html>
于 2012-07-30T15:03:58.583 に答える
0

syncscrollライブラリは、これを必要とする次の人の仕事を容易にするかもしれません...

  • https://github.com/asvd/syncscroll

    $ bower install syncscroll

    <script src="path/to/syncscroll.js"></script>```

<div class=syncscroll name=myElements>
  First big text goes here...
</div>

<div class=syncscroll name=myElements>
  Second big text goes there...
</div>

これで、要素が同時にスクロールされます。スクロールは、ピクセル数ではなく、比例して同期されることに注意してください。

クラスまたは属性を変更して同期された要素のセットを更新する場合は、呼び出しsyncscroll.reset()てリスナーを更新します。

于 2018-08-13T21:19:59.040 に答える