jQuery - Multiscroll.js
multiscroll.js é um plugin jQuery para criar páginas divididas com dois painéis de rolagem vertical.
Um exemplo simples de multiscroll conforme mostrado abaixo -
<!DOCTYPE html>
<html xmlns = "https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title>multiscroll.js - split multi-scrolling pages plugin</title>
<link rel = "stylesheet" type = "text/css"
href = "/jquery/src/multiscroller/jquery.multiscroll.css" />
<link rel = "stylesheet" type = "text/css"
href = "/jquery/src/multiscroller/examples.css" />
<script
src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type = "text/javascript"
src = "/jquery/src/multiscroller/jquery.easings.min.js">
</script>
<script type = "text/javascript"
src = "/jquery/src/multiscroller/jquery.multiscroll.js">
</script>
<script type = "text/javascript">
$(document).ready(function() {
$('#myContainer').multiscroll({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
anchors: ['first', 'second', 'third'],
menu: '#menu',
navigation: true,
navigationTooltips: ['One', 'Two', 'Three'],
loopBottom: true,
loopTop: true
});
});
</script>
</head>
<body>
<ul id = "menu">
<li data-menuanchor = "first"><a href = "#first">First slide</a></li>
<li data-menuanchor = "second"><a href = "#second">Second slide</a></li>
<li data-menuanchor = "third"><a href = "#third">Third slide</a></li>
</ul>
<div id = "myContainer">
<div class = "ms-left">
<div class = "ms-section" id = "left1">
<h1>Left 1</h1>
</div>
<div class = "ms-section" id = "left2">
<h1>Left 2 </h1>
</div>
<div class = "ms-section" id = "left3">
<h1>Left 3</h1>
</div>
</div>
<div class = "ms-right">
<div class = "ms-section" id = "right1">
<h1>Right 1</h1>
</div>
<div class = "ms-section" id = "right2">
<h1>Right 2</h1>
</div>
<div class = "ms-section" id = "right3">
<h1>Right 3</h1>
</div>
</div>
</div>
</body>
</html>Isso deve produzir o seguinte resultado -
Clique aqui