On my page I have two layers (div) with horizontal scroll each ... how can I do to move a scroll the other also move to synchronize the view of both layers?
<div id="divGrid" align="center" style=" overflow-x:auto;" >
<div id="cc" align="center" style="position: fixed; top: 100px; left: 0px; right:0px; opacity: 0.8; display:none; overflow-x:auto;">
</div>
Since you do not put code in the question, I'll give an example of how to synchronize two div of the same size (although the code is scalable to any number of div s):
The idea is to put an event handler scroll in div and when it is launched, update the rest of div s with the same amount of scroll. This can be done with scrollLeft() (without parameters to read the value of div that has been scrolled, and with a value to adjust the scroll of the other div s):
$(".contenedor").on("scroll", function() {
$(".contenedor").scrollLeft($(this).scrollLeft());
});.contenedor {
height:50px;
width:500px;
border:1px solid gray;
overflow:scroll;
}
.scroll {
width:1000px;
height:50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="contenedor">
<div class="scroll"></div>
</div>
<div class="contenedor">
<div class="scroll"></div>
</div>I do not know exactly what your purpose is and if I have understood your question well, but it occurs to me that you put the two divs inside another div and that it is the latter that you move, that way they would move both at the same time.
to each div add the OnScroll event that calls a JavaScript function when there is a shift
this is the JavaScript functions
function ScrollCC() {
var cc = document.getElementById('cc');
var dg = document.getElementById('divGrid');
dg.scrollLeft = cc.scrollLeft;
}
and this one
function ScrollDG() {
var cc = document.getElementById('cc');
var dg = document.getElementById('divGrid');
cc.scrollLeft = dg.scrollLeft;
}