MUI实现区域滚动

移动端页面区域滚动的实现 基于MUI

引入相关包

<!-- 1. 引入mui的CSS文件 -->
<link rel="stylesheet" href="lib/mui/css/mui.css">
<!-- 2. 引入mui的js文件 -->
<script src="lib/mui/js/mui.js"></script>

HTML结构

<!-- 区域滚动的父容器 -->
<div class="mui-scroll-wrapper">
 		<!-- 区域滚动的子容器 -->
 		<div class="mui-scroll">
 			<!-- 真实的内容放到区域滚动的子容器里面 -->
 		</div>
</div>

初始化区域滚动

mui('.mui-scroll-wrapper').scroll({
	scrollY: true, //是否竖向滚动
	scrollX: false, //是否横向滚动
	startX: 0, //初始化时滚动至x
	startY: 0, //初始化时滚动至y
	indicators: true, //是否显示滚动条
	deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
	bounce: true //是否启用回弹
});

注意事项

1.需要给.mui-scroll-wrapper放一个相对定位的父元素 而且这个父元素还必须有高度,父元素一般为body

html,
body {
	height: 100%;
}

MUI官方文档