<div class="mui-scroll-wrapper scroll_1">
<div class="mui-scroll">
<button type="button" class="mui-btn mui-btn-link mui-active">推荐</button>
<button type="button" class="mui-btn mui-btn-link">我的大神</button>
<button type="button" class="mui-btn mui-btn-link">视频</button>
<button type="button" class="mui-btn mui-btn-link">福利专区</button>
<button type="button" class="mui-btn mui-btn-link">内涵搞笑</button>
<button type="button" class="mui-btn mui-btn-link">娱乐八卦</button>
<div class="mui-scroll-wrapper scroll_border">
<div class="mui-scroll">
<span></span>
</div>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.ready(function(){
//初始化滚动
mui('.scroll_1').scroll({
deceleration: 0.0005, //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
scrollY:false,
scrollX:true,
indicators:false//隐藏滚动条
});
mui('.scroll_border').scroll({
deceleration:0.0005,
scrollY:false,
scrollX:true,
indicators:false
});
//类别滚动位置调整
function scroll_go_x(num){
if (num>0 && num<5) {
var x = (num-1)*-90;
mui('.scroll_1').scroll().scrollTo(x,0,500);//类别条滚动,使选中类别处于中间
}
var xx = num*100;
mui('.scroll_border').scroll().scrollTo(xx,0,500);
console.log(num);
}
</script>
</body>
</html>
scroll_border 会初始化失败。初始化失败过后mui('.scroll_border').scroll().scrollTo(xx,0,500);滑动到位置后都会回滚到原点。
我把scroll_1的HTML和JS代码都注释掉过后,scroll_border 一样的初始化失败。
具体可以下载案例。谷歌浏览器手机模式查看。点登陆-登陆。标题下面的选项卡点击切换或者左右滑动内容,选项卡和内容对应的会高亮,问题:选项卡下面的boeder蓝色条滑动到位置后,会回到原点。(我找到原因是因为初始化不成功,就会滚回原点。)