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

}

}


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

相关推荐
yingyima8 小时前
Docker Compose 紧急救援:凌晨3点服务器报警的解决方案
前端
从零开始的代码生活_8 小时前
C++ string 详解:常用接口、字符串算法与深拷贝实现
开发语言·c++·后端·学习·算法
石小石Orz8 小时前
星云SDK + 油猴:给LLM塑造肉身,陪伴你在每个网页
前端·人工智能
2601_963771378 小时前
10 Best PHP Media CMS and Scripts for Web Creators in 2026
开发语言·前端·php
VaJoy9 小时前
全面革新⚡️ Vue 3.6 项目工程的基础实现
前端·vue.js
苍何9 小时前
耗时 7 天,我们开源了腾讯 WorkBuddy 实战蓝皮书(建议收藏)
前端·后端
玖玥拾9 小时前
C# 语言进阶(十四)Unity UI界面开发 + 网络消息联动
服务器·开发语言·网络·ui·unity·c#·游戏引擎
aaPIXa6229 小时前
C++ 质量前置检查:clang-format 与 clang-tidy 实践指南
开发语言·c++
余额瞒着我当琳9 小时前
C++ 基础核心概念精讲:引用、内联与 nullptr
java·开发语言·c++
大家的林语冰10 小时前
😭 Electron 麻了,Deno 直接支持二进制应用,无需第三方桌面应用框架!
前端·javascript·node.js