jquery 在div滚动时激活另一个div的滚动

lnvxswe2 于 2022-12-12 发布在 jQuery

关注(0)|答案(2)|浏览(368)

Jsfiddle
我试图激活当前卷轴，而我在该卷轴之外，特别是在#DivDet
下面是我的尝试：

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

jquery

来源：https://stackoverflow.com/questions/16376794/on-div-scroll-activate-another-divs-scroll

2条答案

按热度按时间

wwtsj6pe1#

听起来你想通过滚动另一个来响应一个div上的滚动。
您已经确定了如何挂钩scroll事件。要设置一个元素（另一个div）的滚动位置，您需要设置该元素的scrollTop和scrollLeft值（以像素为单位）。例如，如果您希望两个div几乎一致地滚动，您需要将源div的scrollTop和scrollLeft赋给目标div。
示例：Live Copy| Source
相关JavaScript：

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

或者可替换地（source）：

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

整页：

<!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>

赞(0）回复(0）举报 2022-12-12

y53ybaqx2#

使用Vanilla JavaScript的解决方案

第一个

赞(0）回复(0）举报 2022-12-12