最近在开发中遇到一个要求，即固定移动端的页面，实现页面中的盒子滚动。这应该是开发中常见的需求，所以在这总结一下，跟大家分享。
其实这个问题不复杂，不需要写js代码，不需要阻止body的默认事件。
上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
body,html{
100%;
height: 100%;
padding: 0;
margin: 0;
/* overflow: hidden; */
}
.container{
height: 100%;
}
.left{
float: left;
30%;
background-color: pink;
}
.left ul li{
100%;
height: 40px;
line-height: 40px;
text-align: center;
}
.right{
float: left;
70%;
height: 100%;
background-color: yellowgreen;
overflow: scroll;
}
.right ul li{
100%;
height: 80px;
line-height: 80px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<ul>
<li>hello,left</li>
<li>hello,left</li>
<li>hello,left</li>
<li>hello,left</li>
<li>hello,left</li>
</ul>
</div>
<div class="right">
<ul>
<li>hello,right</li>
<li>hello,right</li>
<li>hello,right</li>
<li>hello,right</li>
<li>hello,right</li>
<li>hello,right</li>
<li>hello,right</li>
<li>hello,right</li>
<li>hello,right</li>
<li>hello,right</li>
<li>hello,right</li>
<li>hello,right</li>
</ul>
</div>
</div>
</body>
</html>
说明：
首先，body,html必须高度设为100%，这样页面高度就固定了。然后给需要滚动的父盒子设置固定高度，此处注意父盒子的高度加上同级元素的高度总和不能超过页面的高度，否则页面的高度被撑开，整个页面无法固定住。然后给父盒子设置overflow:scroll。这样父盒子就可以滚动了。