5

当用户放大时，我很难保留 div 相对于整个屏幕的位置。基本上，我要做的是将 div 重新定位到正确计算的位置，使其看起来好像从未移动过用户可能已经缩放。这很快变得非常棘手，因为我基本上想撤消缩放事件所做的任何视觉更改。

例如，如果 div 的顶部当前在缩放级别 1 的屏幕中心（例如缩放 1.00），当用户转到缩放级别 2 时（通过捏缩放手势，例如缩放 1.235），我想将 div 的顶部重新定位到屏幕的中心。

目前，我将 div 的父容器绑定到一个捕获手势事件的函数。

来源见链接。

任何有关此事的指导将不胜感激。谢谢。

更新：这是一个示例应用程序的链接。您可以找到我当前的所有处理程序和功能。我主要关心的是在缩放后将元素“palmGuard”重置到相对于屏幕的相同位置。如果您有任何问题，请告诉我。

链接：http ://restingrobot.com/test/testScale.html

此示例仅适用于移动 Safari

4

2 回答 2

0

好的，我相信这可以满足您的要求。

您需要根据 iOS 屏幕按比例计算 div 的位置，而不是使用缩放因子。您将需要全程跟踪这一点。每当 div 被移动（未缩放）并且在开始时，您需要获取此值：

//When div moved and start
var height = window.innerHeight; //Adjust if needed
screenPos = (currentDivTop - window.pageYOffset)/height;

然后当缩放发生时，您需要将gestureEnd上的div顶部设置为屏幕上页面的顶部（即window.pageYOffset）加上屏幕上的当前像素数（window.innerHeight）乘以iOS上的相对位置我们之前计算的屏幕（screenPos）。这为您提供了所需的屏幕上的新位置（与上次不同）。

//GestureEnd of zoom
var height = window.innerHeight; //Adjust if needed
var newDivTop = window.pageYOffset + (screenPos*height);

请记住，您需要跟踪此比例值。

此外，我认为您的缩放“条带”逻辑过于简单，也就是说，如果这是为了在缩放反弹回其范围内时进行处理？我认为它没有考虑到不同的 iOS 屏幕尺寸。

除了影响 innerHeight 的“条带”之外，它似乎也影响了 posYOffset 的值，这确实很有意义。这将导致 div 被放置在页面下方。解决此问题的一种潜在方法是检测缩放何时过远（如您所指的带状）并使用轮询函数检测 innerHeight 何时回落到最小值，然后获取 posYOffset。如果在带状轮询之后存在事件，显然不需要。

您可能能够从 innerHeight 值带计算正确的屏幕顶部（posYOffset），但我认为它可能取决于缩放时手指在缩放时的位置。

同样，posYOffset 和innerHeight 的值在gestureEnd 事件之后似乎确实发生了变化，因此即使没有出现条带，您也需要一些机制来获取pageYOffset 和innerHeight 的确定值。您可以通过将以下内容添加到gestureEnd来测试此效果：

//In gestureEnd
alert ('gestureEnd pageY:'+window.pageYOffset+' height:'+height);
setTimeout(function () {
              alert ('later pageY:'+window.pageYOffset+' height:'+window.innerHeight);
                       }, 
           2000);
于 2012-04-30T14:53:27.260 回答
0

好吧，老实说，我还没有在移动应用程序/网站上工作过。因此，如果它们与用于网站的传统 jquery 不同，我可能对所有语法都不正确。但是您可以尝试以下算法（基本上将 div 从顶部定位在页面的中心）。自从我熟悉它以来，我一直使用传统的 jquery。

/* ---- Excute the below lines on $(window).resize(function(){}); or a function that is triggered on zoom [which ever is correct] ---- */

var modalH = parseInt($('[THE DIV/ELEMENT THAT YOU WANT TO CENTER]').css('height'));
var windowH = $(window).height();
var modalPosY = (windowH - modalH) / 2;
$('[THE DIV/ELEMENT THAT YOU WANT TO CENTER]').css('Top', modalPosY);

当然，div/元素的 CSS 属性必须是绝对的[如果尚未设置]。同样可以沿 x 轴居中（将高度替换为宽度）

或者

您可以使用百分比值作为 div/元素的位置（我认为效果更好）。以下文章将帮助您 - http://novemberborn.net/2007/12/javascriptpage-zoom-ff3-128。（查看测试用例）

于 2012-05-01T20:50:01.023 回答