我在我的模板中使用bootstrap也有两个或更多主面板。我想设置这个面板的独立滚动。面板内容是动态加载的，没有任何分辨率的主体滚动。
我试过这个PubNub's Storage&Playback feature，但无法做到这一点。
这是我的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title> Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style type="text/css">
html, body {
overflow: hidden;
height: 100%;
}
section{
height: 85%;
}
header{
width: 100%;background-color: yellow;
height: 80px;
}
footer{
width: 100%;background-color: black;
height: 20px;
clear: both;
position: absolute;
bottom: 0;
}
#one{
float: left;
width: 15%;
background: green;
height: 100%;
overflow: hidden;
}
#left {
float: left;
width: 45%;
background: red;
height: 100%;
overflow-y: scroll;
}
#right {
float: left;
width: 40%;
background: blue;
height: 100%;
overflow-y: scroll;
}
</style>
</head>
<body >
<header>
</header>
<section>
<div id="one">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec lorem mauris. Nulla fermentum tincidunt nulla et dignissim. In porttitor sem id velit lobortis aliquam. Duis et purus ac orci porttitor luctus at quis leo. Mauris vulputate pellentesque est, sit amet egestas tellus facilisis sit amet. Cras sodales bibendum tellus, a gravida tortor hendrerit sed. Pellentesque blandit posuere nisl</p>
<p> tristique nibh venenatis. In id eros sed libero iaculis commodo quis vitae neque. Nulla gravida neque in tortor congue id mattis massa auctor. Cras auctor tincidunt ipsum, in suscipit risus iaculis sed. Nulla at eros nec urna auctor tincidunt eu ac diam. Aenean nulla metus, accumsan eu dignissim vitae, congue sed nisl. Pellentesque ut nunc eget metus malesuada vulputate interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p></div>
<div id="left">
<p> tristique nibh venenatis. In id eros sed libero iaculis commodo quis vitae neque. Nulla gravida neque in tortor congue id mattis massa auctor. Cras auctor tincidunt ipsum, in suscipit rSuspendisse congue fringilla urna vitae dapibus. Phasellus iaculis, velit at ornare feugiat, nunc dolor scelerisque dolor, sed placerat enim magna sit amet magna. Quisque gravida arcu eu neque porttitor rutrum. Donec tempus urna interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p>
<p> commodo enim. Curabitur eu justo non felis tempus fermentum ut vitae augue. Ut cursus ultrices metus eu vehicula. Praesent sem nulla, eleifend eget adipiscing a, tempor sit amet lectus. Suspendisse congue fringilla urna vitae dapibus. Phasellus iaculis, velit at ornare feugiat, nunc dolor scelerisque dolor, sed placerat enim magna sit amet magna. Quisque gravida arcu eu neque porttitor rutrum. Donec tempus urna interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p>
<p> Pellentesque felis erat, tristique nec semper vel, dignissim ut nisl. Donec ac dui purus. Nunc in ligula lacus. In vehicula scelerisque convallis. Ut in ornare ante. Vestibulum ante fringilla urna vitae dapibus. Phasellus iaculis, velit at ornare feugiat, nunc dolor scelerisque dolor, sed placerat enim magna sit amet magna. Quisque gravida arcu eu neque porttitor rutrum. Donec tempus urna interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p>
<p> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam et libero a nibh venenatis tristique vitae vitae ligula. Phasellus vitae tempor ante. Proin neque porttitor rutrum. Donec tempus urna interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p>
<br>
<h1>haridass</h1>
</div>
<div id="right">
<p>tae tempor ante. Proin egestas commodo enim. Curabitur eu justo non felis tempus fermentum ut vitae augue. Ut cursus ultrices metus eu vehicula. Praesent sem nulla, eleifend eget adipiscinggravida arcu eu neque porttitor rutrum. Donec tempus urna interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p>
<p> eget adipiscing a, tempor sit amet lectus. Suspendisse congue fringilla urna vitae dapibus. Phasellus iaculis, velit at ornare feugiat, nunc dolor scelerisque dolor, sed placerat enim magna sit amet magna. Quisque gravida arcu eu neque porttitor rutrum. Donec tempus urna interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p>
<p>Ut in ornare ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam et libero a nibh venenatis tristique vitae vitae ligula. Phasellus vitae te Quisque gravida arcu eu neque porttitor rutrum. Donec tempus urna interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p>
<p>Suspendisse congue fringilla urna vitae dapibus. Phasellus iaculis, velit at ornare feugiat, nunc dolor scelerisque dolor, sed placerat enim magna sit amet magna. Quisque gravida arcu eu neque porttitor rutrum. Donec tempus urna interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p>
<br>
<h1>haridass</h1>
</div>
</section>
<footer></footer>
</body>
</html>