在div上滚动激活另一个div的滚动 [英] On div scroll activate another div's scroll
问题描述
我试图当我在滚动之外时激活我当前的滚动，特别是在 #DivDet
I trying to activate my current scroll while I am outside that scroll, specifically in #DivDet
这是我试过的：
$("div#DivDet").scroll(function () {
// I don't know what i should have here
// something like $("div#scrlDiv").scroll();
});
推荐答案
听起来你想要回复滚动一个 div 通过滚动另一个。
It sounds like you want to respond to a scroll on one div by scrolling another.
您已经确定如何挂钩滚动事件。要设置元素的滚动位置（另一个 div ），请设置元素的 scrollTop 和 scrollLeft 值（以像素为单位）。例如，如果你想让两个div同时滚动，你可以指定源div的 scrollTop 和 scrollLeft 到目标 div 。
You've already determined how to hook the scroll event. To set the scroll position of an element (the other div), you set the element's scrollTop and scrollLeft values (which are in pixels). If you want two divs to scroll in near-unison, for instance, you'd assign the source div's scrollTop and scrollLeft to the target div.
相关JavaScript：
Relevant JavaScript:
(function() {
var target = $("#target");
$("#source").scroll(function() {
target.prop("scrollTop", this.scrollTop)
.prop("scrollLeft", this.scrollLeft);
});
})();
或者（来源）：
(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>
这篇关于在div上滚动激活另一个div的滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
