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

}

}


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

相关推荐
SparkleN.4 分钟前
mini-agent四个问题完善
前端·chrome·github
极客智造4 分钟前
深度详解 C++ 类型转换:隐式转换、C 风格强转、C++ 四大标准转换
c++·类型转换
Dxy123931021611 分钟前
Python设置Excel表格边框样式:从基础到高级
前端·python·excel
布列瑟农的星空21 分钟前
tree shaking为什么失效
前端
idcu29 分钟前
加入 Lyt.js:从第一行代码到核心贡献者
前端
肥羊zzz33 分钟前
Vue2 vs Vue3 中 v-for 的 key 用法对比
前端·vue.js
dsyyyyy11011 小时前
HTML总结
前端·html
橘颂TA1 小时前
【Linux】自旋锁
linux·开发语言·数据库·c++
珹洺2 小时前
C++AI多模型聊天系统(一)项目背景意义与整体架构、核心基类实现
c++·人工智能·架构
智者知已应修善业2 小时前
【51单片机ADC-MAX1241/ADC0832驱动】2023-6-6
c++·经验分享·笔记·算法·51单片机