mui提供了区域滚动组件,使用时需要遵循如下DOM结构:
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!--这里放置真实显示的DOM内容-->
</div>
</div>
初始化scroll控件:
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
});
快速回滚到该区域顶部,代码如下:
mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);//100毫秒滚动到顶
代码举例:
1. 需求:
当页面向上滑动至一定高度时,在屏幕右下方位置显示返回顶部图标按钮,该按钮默认透明,随着页面的上滑逐步加深至完全不透明,点击该按钮可逐渐滑动屏幕至返回顶部,返回顶部后该按钮消失
2. 代码:
图片按钮样式:默认透明