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 // 顶部溢出对齐

}

}


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

相关推荐
kungggyoyoyo13 分钟前
TRAE中国版SOLO模式上线!我用它从0到1开发了一款AI小说编辑器
前端·vue.js·trae
ohyeah15 分钟前
栈:那个“先进后出”的小可爱,其实超好用!
前端·数据结构
心随雨下25 分钟前
typescript中Triple-Slash Directives如何使用
前端·javascript·typescript
自在极意功。30 分钟前
AJAX 深度详解:从基础原理到项目实战
前端·ajax·okhttp
s***45330 分钟前
SpringBoot返回文件让前端下载的几种方式
前端·spring boot·后端
海上彼尚35 分钟前
[逆向] 1.本地登录爆破
前端·安全
自由生长202436 分钟前
为什么C++项目偏爱.cxx扩展名:从MongoDB驱动说起
c++
什么时候吃饭40 分钟前
vue2、vue3父子组件嵌套生命周期执行顺序
前端·vue.js
2501_9409439141 分钟前
体系课\ Python Web全栈工程师
开发语言·前端·python
q***064742 分钟前
SpringSecurity相关jar包的介绍
android·前端·后端