前端 转屏定位问题分析
var scrollTop = $(window).scrollTop(); // 窗口相对滚动条顶部的偏移
var doclHeight = $(document).height(); // 文档高度
1.如果doclHeight不变,则转屏后scrollTop不变
demo1:前端 转屏定位问题分析demo1
2.如果文档是响应式,则转屏后的scrollTop/doclHeight约等于转屏之前的scrollTop/doclHeight,例如屏幕是200*600,文档是2:1,转屏前的scrollTop=300,doclHeight=2000,则转屏后doclHeight=6000,scrollTop=900
如果转屏后的scrollTop超过了当前屏幕的最大scrollTop,则会定位到最大scrollTop,例如屏幕是600*200,文档是2:1,转屏前的scrollTop=5800,doclHeight=6000,则转屏后doclHeight=2000,scrollTop=1400
demo2:前端 转屏定位问题分析demo2
3.如果文档是响应式,并且转屏后会重新排版,重新排版之前遵循第2点,重新排版之后定位到当前scrollTop,例如屏幕是200*600,文档是2:1,转屏后文档是4:1,转屏前的scrollTop=300,doclHeight=2000,则转屏后doclHeight=6000,scrollTop=900,重新排版后doclHeight=3000,scrollTop=900
如果重新排版之后scrollTop超过了当前屏幕的最大scrollTop,则会定位到最大scrollTop,例如屏幕是200*600,文档是2:1,转屏后文档是4:1,转屏前的scrollTop=1400,doclHeight=2000,则转屏后doclHeight=6000,scrollTop=4200,重新排版后doclHeight=3000,scrollTop=2800,并且还会触发滚动事件
demo3:前端 转屏定位问题分析demo3
这种情况最好是在转屏里面off滚动事件,等转屏处理完成后再on滚动事件
demo4:前端 转屏定位问题分析demo4
设置off对比