Cześć próbuję ustawić scrollbary na górze i na dole jednego diva. Po poszukiwaniach na internecie doszedłem do rozwiązania. Problem niestety pojawia się przy przewijaniu paska - wydaję mi się, że przez to, że jeden scrollbar zmienia drugi i vice versa to działanie niezbyt dobrze wygląda (efekt zacinania się)
Ma ktoś jakiś pomysł jak to zrobić, żeby to działało płynnie ?
Wrzucam kod do podpatrzenia.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scroll Bar Top</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
* {
}
body {
background-color: grey;
}
.container, #scrollContainer, .modalWindow {
margin-left: auto;
margin-right: auto;
}
.container {
background-color: white;
width:800px;
height:400px;
margin-top:30px;
}
#scrollContainer {
transform: translate3d(0,0,0);
width:300px;
overflow-x:scroll;
overflow-y:hidden;
height:20px;
}
.modalWindow {
position:relative;
width:300px;
height:200px;
background-color: #B0B0B0;
overflow-x:scroll;
overflow-y:hidden;
display: flex;
-transition-duration: 2s;
}
.item1 {
background-color:black;
min-width:150px;
height:200px;
}
.item2 {
background-color: red;
min-width:150px;
height:200px;
}
#scrollTop {
transform: translate3d(0,0,0);
overflow-x:scroll;
overflow-y:hidden;
width:600px;
height:20px;
}
</style>
</head>
<body>
<div class="container">
<div id="scrollContainer">
<div id="scrollTop"></div>
</div>
<div class="modalWindow">
<div class="item1"></div>
<div class="item2"></div>
<div class="item1"></div>
<div class="item2"></div>
</div>
</div>
<script>
$(function(){
var top = $("#scrollContainer");
var bottom = $(".modalWindow");
top.scroll(function(){
bottom.scrollLeft(top.scrollLeft());
console.log("przsuwam1")
});
bottom.scroll(function () {
console.log("przsuwam2");
top.scrollLeft(bottom.scrollLeft());
});
});
</script>
</body>
</html>
