在div滚动上激活另一个div的滚动

Question

当我在滚动之外时,我试图激活当前滚动,特别是在 #DivDet

这是我试过的:

$("div#DivDet").scroll(function () {
    // I don't know what i should have here      
    // something like $("div#scrlDiv").scroll();
});

Run Code Online (Sandbox Code Playgroud)

Answer 1

T.J*_*der 35

听起来你想div通过滚动另一个来回应滚动.

您已经确定了如何挂钩scroll事件.要设置元素的滚动位置(另一个div),请设置元素scrollTop和scrollLeft值(以像素为单位).例如,如果你想要两个div以近似的方式滚动,你可以将源div scrollTop和scrollLeft目标分配给目标div.

示例:实时复制 | 资源

相关的JavaScript:

(function() {
  var target = $("#target");
  $("#source").scroll(function() {
    target.prop("scrollTop", this.scrollTop)
          .prop("scrollLeft", this.scrollLeft);
  });
})();

Run Code Online (Sandbox Code Playgroud)

或者(来源):

(function() {
  var target = $("#target")[0]; // <== Getting raw element
  $("#source").scroll(function() {
    target.scrollTop = this.scrollTop;
    target.scrollLeft = this.scrollLeft;
  });
})();

Run Code Online (Sandbox Code Playgroud)

完整页面:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>Scroll Example</title>
  <style>
    .scroll-example {
      display: inline-block;
      width: 40%;
      border: 1px solid black;
      margin-right: 20px;
      height: 100px;
      overflow: scroll;
    }
  </style>
</head>
<body>
  <p>Scroll the left div, watch the right one.</p>
  <div id="source" class="scroll-example">
    1
    <br>2
    <br>3
    <br>4
    <br>5
    <br>6
    <br>7
    <br>8
    <br>9
    <br>10
    <br>11
    <br>12
    <br>13
    <br>14
    <br>15
    <br>16
    <br>17
    <br>18
    <br>19
    <br>20
  </div>
  <div id="target" class="scroll-example">
    1
    <br>2
    <br>3
    <br>4
    <br>5
    <br>6
    <br>7
    <br>8
    <br>9
    <br>10
    <br>11
    <br>12
    <br>13
    <br>14
    <br>15
    <br>16
    <br>17
    <br>18
    <br>19
    <br>20
  </div>
  <script>
  (function() {
    var target = $("#target");
    $("#source").scroll(function() {
      target.prop("scrollTop", this.scrollTop)
            .prop("scrollLeft", this.scrollLeft);
    });
  })();
  </script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，5 月前
查看次数：	18597 次
最近记录：	8 年，1 月前