синхронная прокрутка блоков разной высоты
Маэстро,
скролл колесом мышки,
для теста "много спойлеров", покликать по любым блокам.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
padding: 0;
margin: 0;
}
#chating_wrapper{
box-sizing: border-box;
padding: 0;
height: 100%;
border: 2px #8B4513 solid;
}
.chating_history{
font-weight: bold;
}
.chating_block{
height: 150px;
border-bottom: 2px #8B4513 solid;
transition: height .3s ease-in-out;
}
.chating_block:nth-child(2n){
background-color: #CD853F;
}
.chating_block:last-child {
border-bottom: none;
}
.chating_list{
height: 100%;
width: 50%;
overflow-y: hidden;
float: left;
}
.chating_text{
padding: 4px 0 4px 46px;
}
.chating_list:nth-child(1) .chating_block
{
height: 250px;
border-right: 2px #8B4513 solid;
}
.chating_list:nth-child(1) .chating_block:nth-child(2n) {
background-color: #FF4500;
}
</style>
<title></title>
<script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>
<script>
window.addEventListener("DOMContentLoaded", function() {
var nodes = document.querySelectorAll(".chating_list");
function wheel(event) {
var target = event.target;
if (target.closest(".chating_list")) {
var a = nodes[0].scrollHeight - nodes[0].clientHeight;
var b = nodes[1].scrollHeight - nodes[1].clientHeight;
event.preventDefault();
var delta = 0;
if (event.wheelDelta) delta = event.wheelDelta / 120;
else if (event.detail) delta = -event.detail / 3;
delta = delta > 0 ? -30 : 30;
if (target == nodes[0]) {
nodes[0].scrollTop += delta;
nodes[1].scrollTop =
b * nodes[0].scrollTop / a
} else {
nodes[1].scrollTop += delta / 5;
nodes[0].scrollTop = a * nodes[1].scrollTop / b
}
}
}
window.addEventListener("mousewheel", wheel, false);
window.addEventListener("DOMMouseScroll", wheel, false);
/* для теста изменить высоту, клик по любому блоку*/
window.addEventListener("click", function(event) {
var target = event.target;
if (target.closest(".chating_block")) target.style.height = 100 + (Math.random() * 700 | 0) + "px"
}, false)
});
</script>
</head>
<body>
<div id="chating_wrapper">
<div class="chating_list" >
<div class="chating_block">1</div>
<div class="chating_block">2</div>
<div class="chating_block">3</div>
<div class="chating_block">4</div>
<div class="chating_block">5</div>
<div class="chating_block">6</div>
<div class="chating_block">7</div>
<div class="chating_block">8</div>
<div class="chating_block">9</div>
<div class="chating_block">10</div>
<div class="chating_block">11</div>
<div class="chating_block">12</div>
<div class="chating_block">13</div>
<div class="chating_block">14</div>
<div class="chating_block">15</div>
<div class="chating_block">16</div>
<div class="chating_block">17</div>
<div class="chating_block">18</div>
<div class="chating_block">19</div>
<div class="chating_block">20</div>
</div>
<div class="chating_list" >
<div class="chating_block">1</div>
<div class="chating_block">2</div>
<div class="chating_block">3</div>
<div class="chating_block">4</div>
<div class="chating_block">5</div>
<div class="chating_block">6</div>
</div>
</div>
</body>
</html>
|