Menu
Jsfiddle
I trying to activate my current scroll while I am outside that scroll, specifically in #DivDet
here is what I tried:
$("div#DivDet").scroll(function () { // I don't know what i should have here // something like $("div#scrlDiv").scroll(); }); 
339
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 .
Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
If you want to scroll the current document to a particular place, the value of HREF should be the name of the anchor to which to scroll, preceded by the # sign. If you want to open another document at an anchor, give the URL for the document, followed by #, followed by the name of the anchor.
It sounds like you want to respond to a scroll on one div by scrolling another.
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.
Example: Live Copy | Source
Relevant JavaScript:
(function() { var target = $("#target"); $("#source").scroll(function() { target.prop("scrollTop", this.scrollTop) .prop("scrollLeft", this.scrollLeft); }); })(); or alternately (source):
(function() { var target = $("#target")[0]; // <== Getting raw element $("#source").scroll(function() { target.scrollTop = this.scrollTop; target.scrollLeft = this.scrollLeft; }); })(); Full page:
<!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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
