最近开发了不少skrollr移动端H5项目,其中就遇到横竖屏会对skrollr的元素监听造成影响,页面元素为定位不准,后来发现,横竖屏的时候,skrollr的maxTop 会改变值,恢复横竖屏后,会影响元素的当前位置的判断,特别是使用data-200-top 或者data-100-bottom 类似这种的写法,如果使用的data-1000,直接基于页面顶部定位的动画还好。
锁定竖屏-横屏观看的H5项目:
锁定竖屏-竖屏观看的H5项目:
解决方法: 在横屏时,获取当前滑动的高度getScrollTop(),并摧毁mySkrollr页面滚动监听函数destroy();在竖屏的函数监听中,重新初始化mySkrollr,并且设置当前滑动的高度setScrollTop(curTop)。
如果还是有问题,可以尝试给横竖屏都添加延时,具体方法见关于移动端H5横竖屏问题
var firstInit = true,curTop = 0,mySkrollr;
//横屏
function landscape(){
...
//获取当前滑动的高度
curTop = mySkrollr.getScrollTop();
//摧毁mySkrollr页面滚动监听函数
mySkrollr.destroy();
}
//竖屏
function portrait(){
...
if(firstInit){
...
firstInit = false;
}else {
//重新设置页面滑动
skrollrInit();
}
}
//初始化skrollr
function skrollrInit(){
mySkrollr= skrollr.init({
mobileDeceleration:0.004,
forceHeight:false,
easing: {
WTF: Math.random,
inverted: function(p) {
return 1-p;
}
},
render:function(data) {
});
//第二次横竖屏实现加载
if(!firstInit){
//console.log(curTop);
//设置当前的高度
mySkrollr.setScrollTop(curTop);
}
}