нажать на белую полосу и переместить вверх/вниз
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type='text/css'>
body{
background-color: #A9A9A9;
}
.container {
width: 500px;
height: 300px;
margin: 80px auto;
position: relative;
text-align: center;
}
.container a{
color: #FFFFFF;
}
.container > .top {
height: 100%; width: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;
background: blue;
}
.container > .bottom {
height: 100%; width: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;
background: red;
}
.container > .bar {
height: 3px;
position: absolute;
top: 0px;
right: 0;
left: 0;
background: #FFFFFF;
cursor: move;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".container"), function(b) {
var k = b.querySelector(".bottom"),
c = b.querySelector(".bar"),
d, e = b.clientHeight,
l = b.clientWidth,
g = function(a) {
a = a.clientY - d;
a = Math.min(e, Math.max(0, a));
f(a)
},
f = function(a) {
k.style.clip = "rect(0," + l + "px," + a + "px,0)";
c.style.top = a + "px"
};
f(e / 2);
var h = function(a) {
window.removeEventListener("mousemove", g, !0);
window.removeEventListener("mouseup", h, !0)
};
c.addEventListener("mousedown", function(a) {
d = a.clientY - c.offsetTop;
window.addEventListener("mousemove", g, !0);
window.addEventListener("mouseup", h, !0)
}, !0)
})
});
</script>
</head>
<body>
<div class="container">
<div class="top"><h2><a href="http://javascript.ru/forum/" title="http://javascript.ru/forum/">forum</a></h2></div>
<div class="bottom"><h2><a href="http://www.yandex.ru/" title="http://www.yandex.ru/">yandex</a></h2></div>
<div class="bar"></div>
</div>
<div class="container">
<div class="top"><h2><a href="http://javascript.ru/forum/" title="http://javascript.ru/forum/">forum</a></h2></div>
<div class="bottom"><h2><a href="http://www.yandex.ru/" title="http://www.yandex.ru/">yandex</a></h2></div>
<div class="bar"></div>
</div>
</body>
</html>