使用css比例转换和平移滚动条 - 定位问题

Question

因此，我正在为Web图像工具创建放大和平移区域，并且我已设法使用缩放功能，并且平移功能也可以工作。我遇到了两个问题; - 首先，当我平移时，平移位置重置。其次，滚动功能不允许我访问工作区的左侧和顶部区域。这是一个代码链接，可以了解问题所在：

Link to Codepen

代码段：

缩放代码：

function zoomIn() {
    $('#ui_container').css("zoom", "2");
}

function zoomOut() {
    $('#ui_container').css("zoom", "1");
}

平移代码：

var curXPos = 0;
var curYPos = 0;
var curDown = false;
window.addEventListener("mousedown", function(e) {
    curDown = true;
    curXPos = e.pageX;
    curYPos = e.pageY;
});
window.addEventListener("mouseup", function(e) {
    curDown = false;
});
window.addEventListener("mousemove", function(e) {
    if (curDown === true) {
        $('#ui').scrollLeft((document.body.scrollLeft + (curXPos - e.pageX)));
        $('#ui').scrollTop((document.body.scrollTop + (curYPos - e.pageY)));
    }
});

我的代码也可以在codepen上找到。我已经尝试解决这个问题几个小时了，但是没有找到结果。我该怎么做才能解决这个问题？

提前谢谢，瑞安。

Answer 1

检查一下我的解决方案

＆＃13;

＆＃13;

function zoomIn() {

		$('#ui_container').css("zoom", "2");

}

function zoomOut() {
		$('#ui_container').css("zoom", "1");
}

		var cX = 0;
		var cY = 0;
var dX=0;
var dY=0;

{ // Panning
		var cD = false;

		$("#ui_container").on("mousedown", function(e) {
				cD = true;
				cX = e.screenX;
				cY = e.screenY;
		});

		$("#ui_container").on("mouseup", function(e) {
				cD = false;
			cX=0;
			cY=0;
		});

		$("#ui_container").on("mousemove", function(e) {
				if (cD === true) {
					
					dX+=document.body.scrollLeft + (cX - e.screenX);
					dY+=document.body.scrollTop + (cY - e.screenY);
									cX = e.screenX;
									cY = e.screenY;

						$('#ui').scrollLeft(dX);
						$('#ui').scrollTop(dY);

				}

		});

}

＆＃13;

#ui {
		position: fixed;
		width: 300px;
		height: 300px;
		border: 1px solid rgba(0, 0, 0, 0.15);
		left: 0px;
		top: 0px;
		margin-left: 50px;
		margin-top: 10px;
		overflow: auto;
}

#ui_container {
		position: absolute;
		width: 400px;
		height: 300px;
		left: 50%;
		top: 50%;
		margin-left: -200px;
		margin-top: -150px;
		background-color: #f0f;
		zoom: 1;
	background-image: url("http://www.clker.com/cliparts/x/u/9/2/j/G/transparent-square-hi.png");
	background-size: 10px 10px;
}

#ui_container_padding {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	padding: 20px;
	margin-left: -20px;
	margin-top: -20px;
}

#zoomIn {
		position: absolute;
		width: 30px;
		height: 30px;
		left: 0px;
		top: 0px;
		margin-left: 10px;
		margin-top: 10px;
		border-radius: 100%;
		text-align: center;
		line-height: 30px;
		background-color: #313131;
		color: #ffffff;
		cursor: pointer;
}

#zoomOut {
		position: absolute;
		width: 30px;
		height: 30px;
		left: 0px;
		top: 0px;
		margin-left: 10px;
		margin-top: 50px;
		border-radius: 100%;
		text-align: center;
		line-height: 26px;
		background-color: #313131;
		color: #ffffff;
		cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ui">

		<div id="ui_container">
			
			<span id="ui_container_padding"></span>
	
	</div>

</div>

<span id="zoomIn" onclick="zoomIn()">+</span>
<span id="zoomOut" onclick="zoomOut()">-</span>

＆＃13;

＆＃13;

＆＃13;