前端 转屏定位问题分析

2017-12-26  本文已影响0人  依米花1993

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对比
上一篇下一篇

猜你喜欢

热点阅读