javascript - 为什么在scale后的父元素上设置子元素的offset会出现异常，如何解决？

Question

我尝试在一个经过transform:scale()修改后的父元素“playground”上设置其子元素“ball”的offset属性，但是过程中出现了难以描述的异常，似乎每一次设置offset，其都会与offset所提供的数值有所偏差，必须经过多次修改，其才能正确地符合offset提供的位置。

我的代码如下：

    var new_scale = parseInt(一个输入值，小于3且大于0.3)    $("#playground").css({        transform: 'scale(' + new_scale + ')',    });$("#ball").on("click",function(){    $("#ball").offset({            left: 300,            top: 300    })})

我猜想，或许可能与offset不兼容scale，或者scale并没有直接修改元素的位置有关，但是我的代码非常简单，我就只是希望ball能够到达这么一个位置，事实上他的确能移动，但是需要多次点击才行，我毫无头绪，希望能够得到任何建议，谢谢你们！

Answer 1

遇到的问题可能与 CSS transform 属性的影响有关。当您应用 transform: scale() 时，会改变元素的视觉大小和位置，但实际上，元素的原始位置（布局位置）仍然保持不变。因此，通过 offset() 方法设置元素的位置可能会受到 transform 的影响。

解决此问题的一种方法是将元素的偏移量计算为经过缩放变换后的位置。您可以使用 getBoundingClientRect() 方法来获取经过缩放变换后的元素位置，并设置偏移量。以下是一个示例代码：

var new_scale = parseFloat(一个输入值); // 使用 parseFloat 以处理小数
var $ball = $("#ball");

$("#playground").css({

transform: 'scale(' + new_scale + ')',

});

$ball.on("click", function () {

var playgroundRect = document.getElementById("playground").getBoundingClientRect();var ballRect = $ball[0].getBoundingClientRect();var newLeft = 300 - (playgroundRect.left - ballRect.left) / new_scale;var newTop = 300 - (playgroundRect.top - ballRect.top) / new_scale;$ball.offset({    left: newLeft,    top: newTop});

});
这个代码会考虑到缩放变换，然后计算出在缩放后的坐标系中正确的位置，最后使用 offset() 设置偏移量。

Answer 2

你的问题看起来可能是由于 transform: scale() 改变了元素的大小，但并没有改变元素的位置。这可能导致当你试图设置 offset 时，它并不像你预期的那样工作。

一个可能的解决方案是，在设置 offset 之前，首先将子元素 “ball” 的位置设置为相对于其父元素 “playground” 的绝对位置。这样，当你设置 offset 时，它将会根据这个相对位置进行移动。

你的代码可以修改如下：

var new_scale = parseFloat($("#input").val()); //请注意，这里我假设你是从某个输入字段获取这个值，你可能需要根据你的实际情况调整这个部分$("#playground").css({    transform: 'scale(' + new_scale + ')',});$("#ball").css({    position: 'absolute', //设置绝对位置    left: 0,    top: 0,});$("#ball").on("click",function(){    var parentRect = $("#playground").get(0).getBoundingClientRect(); //获取父元素的边界大小和位置    var ballRect = $("#ball").get(0).getBoundingClientRect(); //获取子元素的边界大小和位置    var newLeft = parentRect.left + (ballRect.left + ballRect.width/2) - (parentRect.left + parentRect.width/2); //计算新的 left 位置    var newTop = parentRect.top + (ballRect.top + ballRect.height/2) - (parentRect.top + parentRect.height/2); //计算新的 top 位置    $("#ball").offset({        left: newLeft,        top: newTop    });});

在这个代码中，我首先获取了父元素和子元素的边界信息，然后计算了新的 left 和 top 位置，这个新的位置是相对于父元素的中心位置的。然后我设置了子元素的 offset 为这个新的位置。这样无论父元素如何缩放，子元素都会始终保持在相对于父元素中心的位置。

这只是一个可能的解决方案，具体情况可能会根据你的需求和环境有所不同。