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

}

}


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

相关推荐
傻小胖1 分钟前
发布一个npm包,更新包,删除包
前端·npm·node.js
runnerdancer5 分钟前
解构shopify,从0到1实现落地页低代码编辑器
前端
pystraf22 分钟前
UOJ 228 基础数据结构练习题 Solution
数据结构·c++·算法·线段树
WEI_Gaot24 分钟前
react19 的项目创建和组件使用
前端·react.js
资深前端外卖员28 分钟前
【nodejs高可用】前端APM应用监控方案 + 落地
前端·后端
牙痛不能吃糖,哭28 分钟前
C++面试复习日记(8)2025.4.25,malloc,free和new,delete的区别
开发语言·c++
OhBonsai28 分钟前
Shader 图像处理1_ToneMap技术处理过曝
前端
突头小恐龙28 分钟前
Chrome devTools - Lighthouse
前端·javascript·chrome
谦谦橘子28 分钟前
手写tiny webpack,理解webpack原理
前端·javascript·webpack
土豆125030 分钟前
Tailwind CSS 精通指南:提升效率、可维护性与最佳实践
前端·css