Показать сообщение отдельно
  #7 (permalink)  
Старый 22.07.2017, 23:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,078

синхронная прокрутка блоков разной высоты
Маэстро,
скролл колесом мышки,
для теста "много спойлеров", покликать по любым блокам.
<!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>
Ответить с цитированием