<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jQuery局部滚动切换代码 - 网页模板</title>
<style>
* { margin: 0; padding: 0;}
.wrap { width: 1000px; margin: 0 auto; overflow: hidden; zoom: 1;}
.left { float: left; width: 800px; height: 500px; overflow: hidden;}
.right { float: right; width: 200px; height: 500px; background-color: #ddd;}
p { font: 30px/500px "Microsoft Yahei"; text-align: center;}
.hd { height: 100px; background-color: #0ff;}
.bd { overflow: hidden; zoom: 1;}
.ft { height: 100px; background-color: #0ff;}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.scrollify.min.js"></script>
<script>
$(function() {
$('.panel').css({'height': $('.left').height()});
$.scrollify({
section: '.panel',
target: '.left'
});
});
</script>
</head>
<body>
<div class="wrap">
<div class="left">
<div class="panel" style="background-color: #f00; color: #fff;">
<p>只有这边可以滚动</p>
</div>
<div class="panel" style="background-color: #0f0; color: #fff;">
<p>局部滚动似乎不太好用，如果上面有内容则会有偏移</p>
</div>
<div class="panel" style="background-color: #00f; color: #fff;">
<p>即使配合 offset 也不能很好的解决</p>
</div>
</div>
<div class="right">
<p>这边不滚动</p>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. <br>
来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a>
</div>
</body>
</html>
