Google Chrome 设备工具栏原理

1.不同预览模式

2.计算出缩放比

3.固定滚动偏移

关键代码:

overview:

ratioW = getChildRect().width / getParentRect().width

ratioH = getChildRect().height / getParentRect().height

maxRatio = max(ratioW, ratioH)

if(maxRatio < 1)

return 1

else

return 1/maxRatio

oldViewCenter = viewCenterOffset

real:

if(bInit) { // 重置

if(childOutline.height < parentOutline.height)

oldViewCenter.fY = viewCenterOffset.fY;

else

oldViewCenter.fY = viewCenterOffset.fY + (childOutline.height - parentOutline.height) / 2; //顶部对齐

} else { // 滚动后拉伸

if(refParentOutline.top >= refChildOutline.top) //上次就无溢出

oldViewCenter.fY = viewCenterOffset.fY + (childOutline.height - parentOutline.height) / 2; //顶部对齐

else {

overflowLen = refParentOutline.top - refChildOutline.top //溢出长度

if(childOutline.height - overflowLen <= parentOutline.height) //溢出后下面留白

oldViewCenter.fY = parentOutline.bottom - childOutline.bottom // 底部对齐

else

oldViewCenter.fY = parentOutline.top - overflowLen - childOutline.top // 顶部溢出对齐

}

}


创作不易,小小的支持一下吧!

相关推荐
陆康永7 小时前
vue2封装hook函数,可以监听主页面生命周期
前端·javascript·vue.js
我命由我123457 小时前
Vue Router - 记录一下 2 种路由写法
前端·javascript·vue.js·前端框架·html·html5·js
AMoon丶7 小时前
C++新特性-智能指针
linux·服务器·c语言·开发语言·c++·后端·tcp/ip
m0_719084117 小时前
导入导出—设备管理系统
前端·javascript·vue.js
周淳APP7 小时前
【计算机网络之XSS、CSRF、DDoS原理及防御措施】
前端·网络·计算机网络·http·ddos·xss·csrf
wuhen_n7 小时前
Vue Router 进阶:路由懒加载、导航守卫与元信息的高效运用
前端·javascript·vue.js
SoaringHeart7 小时前
Flutter进阶|源码修改:给 DecorationImage 源码添加偏移量
前端·flutter
wuhen_n7 小时前
虚拟列表完全指南:从原理到实战,轻松渲染10万条数据
前端·javascript·vue.js
草莓熊Lotso7 小时前
手搓简易 Linux 进程池:从 0 到 1 实现基于管道的任务分发系统
linux·运维·服务器·数据库·c++·人工智能
兆子龙7 小时前
React Hooks 避坑指南:那些让你 debug 到凌晨的陷阱
前端·javascript