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

}

}


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

相关推荐
求知摆渡2 分钟前
从零开始搭建typecho
前端·后端
极客悟道2 分钟前
彻底搞懂Java值传递:90%开发者都会踩的坑
前端·后端
Mintopia12 分钟前
计算机图形学中的毛发与布料模拟:让虚拟世界动起来的魔法
前端·javascript·计算机图形学
小飞悟16 分钟前
组件通信的艺术:从 props 钻井到 context 共享的进化之路
前端·javascript·设计模式
Mintopia16 分钟前
Three.js 中正切函数在相机视野里的那些事儿
前端·javascript·three.js
大白的编程日记.18 分钟前
【计算机基础理论知识】C++篇(二)
开发语言·c++·学习
Dream耀19 分钟前
掌握React useContext:轻量级状态共享与性能优化指南
前端·javascript·react.js
前端开发与ui设计的老司机19 分钟前
从数据洞察到设计变革:UI前端如何利用数字孪生重塑用户体验?
ui·ux
十盒半价19 分钟前
Stylus 伪元素:让 CSS 玩出 “无中生有” 的新花样
前端·css·trae
红衣信20 分钟前
React 中 useContext 的使用与状态共享详解
前端·react.js·面试