我想使用wheel事件设置一个元素的比例和边距，使其以流动的方式居中。我想使用边距来居中，因为在某些时候我也想以流体方式设置环绕元素的滚动位置。
你可以看到在jsfiddle的例子中，我使用css的过渡属性，使其流体。与此同时，我改变了比例和边距，但看起来边距动画开始得更快，导致div边先移动。你可以试着放大一点，用鼠标滚轮上下移动。
如何修复它，使它同时开始和结束，以便位于图片中间的十字架在放大和缩小期间不会横向移动?
jsfiddle
<html>
<div id="wrap">
<div id="el">
+
</div>
</div>
</html>
var scale = 1;
var $wrap = $('#wrap');
var $el = $('#el');
$(function() {
$el.on('wheel', function (e) {
scale = e.originalEvent.wheelDelta > 0 ? scale * 1.5: scale / 1.5;
e.preventDefault();
var l = ($wrap.width() - $el.width() * scale) / 2;
var t = ($wrap.height() - $el.height() * scale) / 2;
$el.css({
'transform': "scale(" + scale + ")",
'margin-top': t + "px",
'margin-left': l + "px",
});
});
});
#wrap {
position: fixed;
width: 400px;
height: 300px;
background: pink;
}
#el {
position: relative;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
transition: 1s;
transform-origin: 0 0;
background-image: radial-gradient(circle at 0px 0px, #666 1px, transparent 0);
background-size: 4px 4px;
}
编辑:查看问题的最佳方法是使用鼠标滚动一次(一次勾选)，并在动画结束时再次滚动。
Edit2:所以我使用了Gabriele Petrioli的答案，它看起来不错，但是我仍然需要这个关于元素位置的信息。我想出了一个解决方案，我把边距移动到css转换属性作为"翻译"选项，它看起来很好
我所取代:
$el.css({
'transform': "scale(" + scale + ")",
'margin-top': t + "px",
'margin-left': l + "px",
});
:
$el.css({
'transform': "translate(" + t + "px, " + l + "px) scale(" + scale + ")",
});
jsfiddle
我将使用absolute定位，并从一开始就将其定位在中心位置。
一些变化
- 使用
position:absolute和left/right将其定位在中心 - 使用
transform: translate(-50%, -50%)来匹配网格中心和包装中心 - 将原点设置为
50% 50%，这样你就不必考虑移动 - 现在你不需要边距，你可以只调整比例
- 添加了
Math.max/Math.min在那里只是为了保持测试的示例相同。
var scale = 1;
var $wrap = $('#wrap');
var $el = $('#el');
$(function() {
$el.on('wheel', function(e) {
e.preventDefault();
scale = e.originalEvent.wheelDelta > 0 ? scale * 1.5 : scale / 1.5;
scale = Math.min(Math.max(scale, 0.2) ,20);
$el.css({
'transform': `translate(-50%,-50%) scale(${Math.max(scale,0.1)})`,
});
});
});#wrap {
position: fixed;
width: 400px;
height: 300px;
background: pink;
}
#el {
position: absolute;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
transition: transform 1s;
transform-origin: 50% 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: radial-gradient(circle at 0px 0px, #666 1px, transparent 0);
background-size: 4px 4px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div id="wrap">
<div id="el">
+
</div>
</div>
</html>