2

我看到这篇文章并试图复制它，但它不起作用 - 同步滚动

我有一个带有 2 个选项卡的 TabContainer，这些选项卡具有 div、bmrDetailDataDiv 和 residentDetailDataDiv。

这是我的 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 安装同步滚动

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