I need help please.
And thank you !
VERTICAL SCROLL
When ".right" scroll down = ".center" scroll top, ".left" scroll down / & reverse
When ".left" scroll down = ".center" scroll top, ".right" scroll down / & reverse
When ".center" scroll down = ".right" scroll down, ".left" scroll down / & reverse
Left & Center are ok but... not Right
HTML :
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<div class="contain-img">
<div class="left">
<img src="img1">
<img src="img2">
<img src="img3">
</div>
<div class="center">
<img src="img1">
<img src="img2">
<img src="img3">
</div>
<div class="right">
<img src="img1">
<img src="img2">
<img src="img3">
</div>
</div>
<script src="scroll.js"><script>
</body>
CSS :
.contain-img{
display: flex;
width: 100%;
height: 50%;
margin-left: auto;
margin-right: auto;
}
.left, .center, .right{
height: 300px;
width: 300px;
margin: 0;
overflow-y:scroll;
border: 0;
display: flex;
}
.left, .right{
flex-direction: column;
}
.center{
flex-direction: column-reverse;
}
.left img, .center img, .right img{
display: block;
height: 100%;
width: 100%;
}
JS :
var timeout;
$('.left, .center, .right').on("scroll", function callback() {
clearTimeout(timeout);
var source = $(this),
target = $(source.is(".left") ? '.center' : '.left');
target.off("scroll").scrollTop(-source.scrollTop());
var source = $(this),
target = $(source.is(".left") ? '.right' : '.left');
target.off("scroll").scrollTop(source.scrollTop());
var source = $(this),
target = $(source.is(".center") ? '.right' : '.center');
target.off("scroll").scrollTop(-source.scrollTop());
var source = $(this),
target = $(source.is(".center") ? '.left' : '.center');
target.off("scroll").scrollTop(-source.scrollTop());
timeout = setTimeout(function() {
target.on("scroll", callback);
}, 100);
});```
question from:
https://stackoverflow.com/questions/65894577/js-3-scrollbar-synchronized 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
