前端 转屏定位问题分析

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对比
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,816评论 1 92
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,261评论 4 61
  • 许多同学可能在使用Python进行科学计算时用过稀疏矩阵的构造,而python的科学计算包scipy.sparse...
    芮芮cat阅读 3,372评论 0 0
  • 我发现,世界上是存在怎么忙都忘不掉的事情的。 尽管我已经努力的填满自己的生活,忙着学习、忙着工作、忙着吃饭睡觉。 ...
    douzide阅读 50评论 0 0
  • 周末和朋友徒步去网络上强力推荐的石头城,我俩都没有去过,但都没有坐车的想法。于是到达那个石头城所在的镇之后,向集市...
    小胡的世界阅读 413评论 0 1