lossy11,
<!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">
#chating_wrapper{
padding: 0;
height: 175px;
border: 2px #8B4513 solid;
}
.chating_history{
font-weight: bold;
}
.chating_block{
height: 50px;
border-bottom: 2px #8B4513 solid;
}
.chating_list{
height: 175px;
width: 50%;
overflow-y: hidden;
float: left;
}
.chating_text{
padding: 4px 0 4px 46px;
}
</style>
<title> by dirkdirk</title>
<script>
window.addEventListener("DOMContentLoaded", function() {
var nodes = document.querySelectorAll(".chating_list");
var a = nodes[0].scrollHeight - nodes[0].clientHeight;
var b = nodes[1].scrollHeight - nodes[1].clientHeight;
function wheel(event) {
var target = event.target;
while (target != document) {
if (target == nodes[0]||target == nodes[1]) {
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 ;{};
nodes[0].scrollTop += delta;
nodes[1].scrollTop += delta*b/a;
break
}
target = target.parentNode
}
}
window.addEventListener("mousewheel", wheel, false);
window.addEventListener("DOMMouseScroll", wheel, false)
});
</script>
</head>
<body>
<div id="chating_wrapper">
<div class="chating_list" id="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" id="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>
