在 div 滾動上激活另一個 div 的滾動
[英]On div scroll activate another div's scroll
問題描述
當我在那個卷軸之外時，我試圖激活我當前的卷軸，特別是在#DivDet
這是我試過的：
$("div#DivDet").scroll(function () {
// I don't know what i should have here
// something like $("div#scrlDiv").scroll();
});
2 個解決方案
解決方案1
34 已采納 2013-05-04 17:10:59
聽起來你想通過滾動另一個div來響應一個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);
});
})();
或者（ 來源 ）：
(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>
解決方案2
0 2022-12-11 04:27:08
香草溶液 JavaScript
const multiElementScroll = ( elem1, elem2 ) => { elem1.onscroll = function() { elem2.scrollTop = this.scrollTop; }; } multiElementScroll( div1, div2 )
section { display: flex; justify-content: space-between; }.scroll-box { width: 200px; height: 200px; overflow-y: scroll; border: 1px solid #d99; }.scroll-box h2 { margin-top: 50px; }
<section> <div class="scroll-box" id="div1"> <h1>A</h1> <h2>B</h2> <h2>C</h2> <h2>D</h2> <h2>E</h2> <h2>F</h2> <h2>G</h2> <h2>H</h2> </div> <div class="scroll-box" id="div2"> <h1>1</h1> <h2>2</h2> <h2>3</h2> <h2>4</h2> <h2>5</h2> </div> <section>
帶滾動的 Div 滾動到另一個帶滾動的 div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.