使用CSS縮放轉換和平移滾動條-定位問題

Question

因此，我正在為Web圖像工具創建一個放大和平移區域，並且我設法使用了縮放功能，並且平移功能也正常工作。 但是我遇到了兩個問題。 -首先，當我平移時，平移位置會重置。 其次，滾動功能不允許我訪問工作區的左側和頂部。 這是一個Codepen鏈接，可讓您大致了解問題所在：

鏈接到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)));
    }
});

我的代碼也可以在代碼筆上找到。 我已經嘗試解決了幾個小時，但是沒有找到結果。 我該怎么做才能解決此問題？

預先感謝，瑞安。

Answer 1

簽出我的解決方案

 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); } }); } 

 #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; } 

 <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>