可以使用带有覆盖 div 的 iscroll 捏合/缩放吗？

Posted 2023-03-14

【中文标题】可以使用带有覆盖 div 的 iscroll 捏合/缩放吗？

【英文标题】：Possible to use iscroll pinch/zoom with overlayed divs?

【发布时间】：2012-05-07 17:12:37

【问题描述】：

我正在尝试将具有特定位置的 div（“childItem”）覆盖在具有背景图像的较大 div（“parentContainer”）之上。然后我使用 iscroll 允许在父 div 上进行捏合/缩放。这行得通。但是，在捏合/缩放完成后，子 div 不会保持其相对于父 div 更新缩放级别的位置。

所以基本上，背景图像被缩放，但子 div 的位置没有被缩放。关于如何在使用 iscroll 完成缩放后重新定位 childItem 的任何想法？示例：

<div id="parentContainer">
    <img src="map_background.png" />
    <div id="childItem" style="top:40px;left:40px;">
        <img src="map_icon.png" />
    </div>
</div>

<script type="text/javascript">
var myScroll = new iScroll('parentContainer',  zoom: true );
</script>

【参考方案1】：

答案比我想象的要简单得多。我需要做的就是将图像和子 div 包装在另一个 div 中，以使它们一起缩放。

<div id="parentContainer">
    <div>
        <img src="map_background.png" />
        <div id="childItem" style="top:40px;left:40px;">
            <img src="map_icon.png" />
        </div>
    </div>
</div>