更新
我从使用jquery scrollLeft和scrollTop函数切换到javascript scrollTo函数，这使我可以将滚动条分配组合到一个调用中，并且不需要jquery开销。
背景
我正在创建一个查看器，使用户可以在“控件”框中拖动鼠标，或在表格的“显示”框和图像的另一个“显示”框周围使用垂直/水平滚动条。两个“显示”框周围的滚动条可独立放置其各自框的内容。除了用作普通滚动条之外，它们还向用户显示在每个“显示”框中看到“显示”框内容的哪一部分。没有滚动条，拖动鼠标不会让您知道内容有多大。 “显示”框使用overflow: auto; css / style属性在必要时显示滚动条。
以下是演示页面中重要控件和显示的布局，如下所示：
鼠标拖动“控制”框在屏幕的左上角。表格的“显示”框位于屏幕的中上部。图像“显示”框位于屏幕的右上方。
这些框下面是两行x和y缩放输入。第一组用于表格“显示”框。第二组用于图像“显示”框。
在缩放输入下面是一组输入和一个按钮，该按钮可让您设置水平和垂直像素的数量来移动滚动条，以及一个按钮可用于更新滚动条。我使用它来确定两个“显示”框的正确缩放比例值，但是产生的结果与使用鼠标拖动“控制”框时产生的结果不同，因此虽然它确实移动了滚动条，但我发现它有点像对我来说是死胡同。
在这些输入和按钮下面是一个按钮，用于自动计算在上述输入中滚动条需要按指定像素数量递增移动的次数。这仅适用于表的“显示”框，并且由于与上述控件相同的原因，也是死胡同。
所有这些下面是两个信息输出区域。第一个显示有关鼠标事件以及“控件”和表“显示”框的大小的信息，但不显示图像“显示”框的信息。第二个显示的是输入到缩放比例输入中的值，这有助于在确定每个“显示”框的正确值时帮助跟踪所尝试的缩放值。
问题
到目前为止，我还没有弄清鼠标拖动的'控制'框和两个'显示'框之间的关系，所以我不得不通过反复试验手动确定这些值。如果缩放值不是“足够接近”，则两个“显示”框中的“显示”框内容将不会与“控制”框中的鼠标拖动动作正确同步。
我用一个图像“显示”框更新了这个问题，因此可以看出，每个“显示”内容项的缩放值都不同。此外，如果“内容”项的大小发生更改（例如，放大或缩小图像时），则缩放值也会更改。
这就是为什么我真的需要如何正确计算它们的帮助。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<style>
#div1, #div2, #div1 > div, #div3 {
width: 214px;
height: 115px;
}
#div1 {
position: relative;
user-select: none; /* Standard syntax */
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10+ and Edge */
}
#div1 > div {
position: absolute;
top: 50%;
z-index: -1;
color: black;
height: 0;
font-weight: bolder;
margin-top: -8px;
}
#div1, #div2, #div3 {
margin: 0 50px;
border: 1px solid black;
}
#div2, #div3 {
overflow: auto;
}
td {
width: 5px;
height: 5px;
border: 1px solid black;
}
tr:first-of-type > td,
tr > td:first-of-type,
tr:last-of-type > td,
tr > td:last-of-type {
border: none;
font-weight: bold;
text-align: center;
}
#demo, #values {
display: table-cell;
}
#demo {
width: 90%;
}
#demo:empty::after,
#values:empty::after {
content: "empty";
}
.pulsate {
-webkit-animation: pulsate 1s ease-in-out infinite alternate;
-moz-animation: pulsate 1s ease-in-out infinite alternate;
animation: pulsate 1s ease-in-out infinite alternate;
opacity: 0.5;
}
@-webkit-keyframes pulsate {
0% {
opacity: 0.5;
}
25% {
opacity: 0.75;
}
50% {
opacity: 1.0;
}
75% {
opacity: 0.75;
}
100% {
opacity: 0.5;
}
}
</style>
</head>
<body>
<table>
<tr>
<td>
Mouse not dragging.
</td>
<td></td>
</tr>
<tr>
<td>
<div id="div1" draggable="false">
<div class="pulsate"
style="color: black;">✲</div>
</div>
<span>
Drag click in this box to move the table<span> in ..</span>.
</span>
<script>
var div1 = document.getElementById( 'div1' );
// onmousedown="this.mousedown = true; mousemove( event );"
div1.addEventListener( 'mousedown',
function() {
this.mousedown = true;
mousemove( event );
},
false );
// onmousemove="if( this.mousedown ) mousemove( event );"
div1.addEventListener( 'mousemove',
function() {
if( this.mousedown )
mousemove( event );
},
false );
// onmouseup="this.mousedown = false;"
div1.addEventListener( 'mouseup',
function() {
if( this.mousedown )
mousemove( event );
this.mousedown = false;
},
false );
div1.addEventListener( 'mouseout',
function() {
if( this.mousedown )
mousemove( event );
this.mousedown = false;
},
false );
setInterval( function() {
// Red Green
const colors = [ '#FF0000', '#00FF00',
// Blue Black
'#0000FF', '#000000',
// Violet Drk-Grn
'#7100A6', '#008CFF',
// Dgr-Blu Orange
'#FF6A00', '#4542FF',
// RoyalBlu Purple
'#31A851', '#C14FFF' ];
var index =
( ( typeof this.index === 'undefined' )
? ( this.index = 0 )
: ( ( ++this.index >= colors.length )
? ( this.index = 0 )
: this.index ) );
div1.querySelector( 'div' ).style
.color = colors[ index ];
},
1000 );
</script>
</td>
<td style="border: none;">
<div id="div2">
<table id="table">
<tr><td> </td><td> A </td><td> B </td><td> C </td>
<td> D </td><td> E </td><td> F </td><td> G </td>
<td> H </td><td> I </td><td> J </td><td> K </td>
<td> L </td><td> M </td><td> N </td><td> O </td>
<td> </td></tr>
<tr><td> 01</td><td>01A</td><td>01B</td><td>01C</td><td>01D</td>
<td>01E</td><td>01F</td><td>01G</td><td>01H</td><td>01I</td>
<td>01J</td><td>01K</td><td>01L</td><td>01M</td><td>01N</td>
<td>01O</td><td>01 </td></tr>
<tr><td> 02</td><td>02A</td><td>02B</td><td>02C</td><td>02D</td>
<td>02E</td><td>02F</td><td>02G</td><td>02H</td><td>02I</td>
<td>02J</td><td>02K</td><td>02L</td><td>02M</td><td>02N</td>
<td>02O</td><td>02 </td></tr>
<tr><td> 03</td><td>03A</td><td>03B</td><td>03C</td><td>03D</td>
<td>03E</td><td>03F</td><td>03G</td><td>03H</td><td>03I</td>
<td>03J</td><td>03K</td><td>03L</td><td>03M</td><td>03N</td>
<td>03O</td><td>03 </td></tr>
<tr><td> 04</td><td>04A</td><td>04B</td><td>04C</td><td>04D</td>
<td>04E</td><td>04F</td><td>04G</td><td>04H</td><td>04I</td>
<td>04J</td><td>04K</td><td>04L</td><td>04M</td><td>04N</td>
<td>04O</td><td>04 </td></tr>
<tr><td> 05</td><td>05A</td><td>05B</td><td>05C</td><td>05D</td>
<td>05E</td><td>05F</td><td>05G</td><td>05H</td><td>05I</td>
<td>05J</td><td>05K</td><td>05L</td><td>05M</td><td>05N</td>
<td>05O</td><td>05 </td></tr>
<tr><td> 06</td><td>06A</td><td>06B</td><td>06C</td><td>06D</td>
<td>06E</td><td>06F</td><td>06G</td><td>06H</td><td>06I</td>
<td>06J</td><td>06K</td><td>06L</td><td>06M</td><td>06N</td>
<td>06O</td><td>06 </td></tr>
<tr><td> 07</td><td>07A</td><td>07B</td><td>07C</td><td>07D</td>
<td>07E</td><td>07F</td><td>07G</td><td>07H</td><td>07I</td>
<td>07J</td><td>07K</td><td>07L</td><td>07M</td><td>07N</td>
<td>07O</td><td>07 </td></tr>
<tr><td> 08</td><td>08A</td><td>08B</td><td>08C</td><td>08D</td>
<td>08E</td><td>08F</td><td>08G</td><td>08H</td><td>08I</td>
<td>08J</td><td>08K</td><td>08L</td><td>08M</td><td>08N</td>
<td>08O</td><td>08 </td></tr>
<tr><td> 09</td><td>09A</td><td>09B</td><td>09C</td><td>09D</td>
<td>09E</td><td>09F</td><td>09G</td><td>09H</td><td>09I</td>
<td>09J</td><td>09K</td><td>09L</td><td>09M</td><td>09N</td>
<td>09O</td><td>09 </td></tr>
<tr><td> 10</td><td>10A</td><td>10B</td><td>10C</td><td>10D</td>
<td>10E</td><td>10F</td><td>10G</td><td>10H</td><td>10I</td>
<td>10J</td><td>10K</td><td>10L</td><td>10M</td><td>10N</td>
<td>10O</td><td>10 </td></tr>
<tr><td> 11</td><td>11A</td><td>11B</td><td>11C</td><td>11D</td>
<td>11E</td><td>11F</td><td>11G</td><td>11H</td><td>11I</td>
<td>11J</td><td>11K</td><td>11L</td><td>11M</td><td>11N</td>
<td>11O</td><td>11 </td></tr>
<tr><td> 12</td><td>12A</td><td>12B</td><td>12C</td><td>12D</td>
<td>12E</td><td>12F</td><td>12G</td><td>12H</td><td>12I</td>
<td>12J</td><td>12K</td><td>12L</td><td>12M</td><td>12N</td>
<td>12O</td><td>12 </td></tr>
<tr><td> 13</td><td>13A</td><td>13B</td><td>13C</td><td>13D</td>
<td>13E</td><td>13F</td><td>13G</td><td>13H</td><td>13I</td>
<td>13J</td><td>13K</td><td>13L</td><td>13M</td><td>13N</td>
<td>13O</td><td>13 </td></tr>
<tr><td> 14</td><td>14A</td><td>14B</td><td>14C</td><td>14D</td>
<td>14E</td><td>14F</td><td>14G</td><td>14H</td><td>14I</td>
<td>14J</td><td>14K</td><td>14L</td><td>14M</td><td>14N</td>
<td>14O</td><td>14 </td></tr>
<tr><td> 15</td><td>15A</td><td>15B</td><td>15C</td><td>15D</td>
<td>15E</td>
<td>15F</td><td>15G</td><td>15H</td><td>15I</td><td>15J</td>
<td>15K</td><td>15L</td><td>15M</td><td>15N</td><td>15O</td>
<td>15 </td></tr>
<tr><td> 16</td><td>16A</td><td>16B</td><td>16C</td><td>16D</td>
<td>16E</td><td>16F</td><td>16G</td><td>16H</td><td>16I</td>
<td>16J</td><td>16K</td><td>16L</td><td>16M</td><td>16N</td>
<td>16O</td><td>16 </td></tr>
<tr><td> 17</td><td>17A</td><td>17B</td><td>17C</td><td>17D</td>
<td>17E</td><td>17F</td><td>17G</td><td>17H</td><td>17I</td>
<td>17J</td><td>17K</td><td>17L</td><td>17M</td><td>17N</td>
<td>17O</td><td>17 </td></tr>
<tr><td> 18</td><td>18A</td><td>18B</td><td>18C</td><td>18D</td>
<td>18E</td><td>18F</td><td>18G</td><td>18H</td><td>18I</td>
<td>18J</td><td>18K</td><td>18L</td><td>18M</td><td>18N</td>
<td>18O</td><td>18 </td></tr>
<tr><td> 19</td><td>19A</td><td>19B</td><td>19C</td><td>19D</td>
<td>19E</td><td>19F</td><td>19G</td><td>19H</td><td>19I</td>
<td>19J</td><td>19K</td><td>19L</td><td>19M</td><td>19N</td>
<td>19O</td><td>19 </td></tr>
<tr><td> 20</td><td>20A</td><td>20B</td><td>20C</td><td>20D</td>
<td>20E</td><td>20F</td><td>20G</td><td>20H</td><td>20I</td>
<td>20J</td><td>20K</td><td>20L</td><td>20M</td><td>20N</td>
<td>20O</td><td>20 </td></tr>
<tr><td> 21</td><td>21A</td><td>21B</td><td>21C</td><td>21D</td>
<td>21E</td><td>21F</td><td>21G</td><td>21H</td><td>21I</td>
<td>21J</td><td>21K</td><td>21L</td><td>21M</td><td>21N</td>
<td>21O</td><td>21 </td></tr>
<tr><td> 22</td><td>22A</td><td>22B</td><td>22C</td><td>22D</td>
<td>22E</td><td>22F</td><td>22G</td><td>22H</td><td>22I</td>
<td>22J</td><td>22K</td><td>22L</td><td>22M</td><td>22N</td>
<td>22O</td><td>22 </td></tr>
<tr><td> 23</td><td>23A</td><td>23B</td><td>23C</td><td>23D</td>
<td>23E</td><td>23F</td><td>23G</td><td>23H</td><td>23I</td>
<td>23J</td><td>23K</td><td>23L</td><td>23M</td><td>23N</td>
<td>23O</td><td>23 </td></tr>
<tr><td> 24</td><td>24A</td><td>24B</td><td>24C</td><td>24D</td>
<td>24E</td><td>24F</td><td>24G</td><td>24H</td><td>24I</td>
<td>24J</td><td>24K</td><td>24L</td><td>24M</td><td>24N</td>
<td>24O</td><td>24 </td></tr>
<tr><td> </td><td> A </td><td> B </td><td> C </td><td> D </td>
<td> E </td><td> F </td><td> G </td><td> H </td><td> I </td>
<td> J </td><td> K </td><td> L </td><td> M </td><td> N </td>
<td> O </td><td> </td></tr>
</table>
</div>
<span>this box and</span>
</td>
<td style="border: none;">
<div id="div3">
<img src="https://www.luvbat.com/uploads/dog_adopts_baby_deer__3225052235.jpg" />
</div>
<span>this box.</span>
</td>
</tr>
</table>
<p>
Mouse over the rectangle above, and get the coordinates of your mouse
pointer.
</p>
<p>
When the mouse is moved over the div, the element will display the
horizontal and vertical coordinates of your mouse pointer, whose
values are returned from the clientX and clientY properties on the
MouseEvent object.
</p>
<label>X-Scale 2:
<input type="number" id="xScale2" min="0" value="1.6"
onchange="document.getElementById( 'values' ).innerHTML =
'xScale2: ' +
this.value + '<br />' +
document.getElementById( 'values' ).innerHTML;" />
</label>
<label>Y-Scale 2:
<input type="number" id="yScale2" min="0" value="4.5"
onchange="document.getElementById( 'values' ).innerHTML =
'yScale2: ' +
this.value + '<br />' +
document.getElementById( 'values' ).innerHTML;" />
</label>
<button onclick="overlay( this );">
Overlay the table with the control box
</button><br /><br />
<label>X-Scale 3:
<input type="number" id="xScale3" min="0" value="2.45"
onchange="document.getElementById( 'values' ).innerHTML =
'xScale3: ' +
this.value + '<br />' +
document.getElementById( 'values' ).innerHTML;" />
</label>
<label>Y-Scale 3:
<input type="number" id="yScale3" min="0" value="4.3"
onchange="document.getElementById( 'values' ).innerHTML =
'yScale3: ' +
this.value + '<br />' +
document.getElementById( 'values' )
.innerHTML;" />
</label><br /><br />
<label>X-Drag:
<input type="number" id="xDrag" value="1" />
</label>
<label>Y-Drag:
<input type="number" id="yDrag" value="1" />
</label>
<button onclick="mousemove( this );">
Simulate Mouse-Drag
</button>
<button onclick="resetScales();">Reset Scales</button><br /><br />
<button onclick="mousemove( this );">
Simulate Mouse-Dragging
</button><br /><br />
<script>
var div2 = document.getElementById( 'div2' );
var div3 = document.getElementById( 'div3' );
function overlay( This ) {
if( This.innerText === 'Overlay the table with the control box' ) {
This.innerText = 'Separate the control box and table';
div2.style.cssText = 'position: absolute; top: 34px; ' +
'z-index: -2; ' +
'left: 11px; float: left;';
document.querySelector( '#div2 + span' ).style.display =
document.querySelector( '#div1 + span > span' ).style.display =
'none';
}
else {
This.innerText = 'Overlay the table with the control box';
div2.style.cssText = '';
document.querySelector( '#div2 + span' ).style.display =
document.querySelector( '#div1 + span > span' )
.style.display = 'inline';
}
}
function resetScales() {
document.getElementById( 'xScale' ).value = 1;
document.getElementById( 'yScale' ).value = 1;
$( div2 ).scrollLeft( 0 ).scrollTop( 0 );
$( div3 ).scrollLeft( 0 ).scrollTop( 0 );
}
</script>
<div id="demo"></div>
<div id="values"></div>
<script>
function mousemove( e ) {
var tbl = document.getElementById( 'table' );
var xS2 = parseFloat( document.getElementById( 'xScale2' ).value );
var yS2 = parseFloat( document.getElementById( 'yScale2' ).value );
var xS3 = parseFloat( document.getElementById( 'xScale3' ).value );
var yS3 = parseFloat( document.getElementById( 'yScale3' ).value );
var cs1 = getComputedStyle( div1 );
var cs2 = getComputedStyle( div2 );
var cs3 = getComputedStyle( div3 );
var cs4 = getComputedStyle( tbl );
var cs5 = getComputedStyle( tbl );
var sH2 = div2.scrollHeight; // tbl.scrollHeight;
var sW2 = div2.scrollWidth; // tbl.scrollWidth;
var h1 = parseFloat( cs1.height );
var h2 = parseFloat( cs2.height );
var h3 = parseFloat( cs3.height );
var h4 = parseFloat( cs4.height );
var h5 = parseFloat( cs5.height );
var w1 = parseFloat( cs1.width );
var w2 = parseFloat( cs2.width );
var w3 = parseFloat( cs3.width );
var w4 = parseFloat( cs4.width );
var w5 = parseFloat( cs5.width );
var x, x2, x3, y, y2, y3, coor, countX, countY, lastX, lastY;
if( typeof e.tagName === 'undefined' ) {
coor = 'event.type: ' + e.type + '<br /><br />';
// Returns the element related to the element that triggered the
// mouse event
coor += 'toElement: ' +
e.toElement.tagName + '#' + e.toElement.id + '<br />';
coor += 'relatedTarget: ' +
( e.relatedTarget ? e.relatedTarget.id : 'null' ) +
'<br />';
x = e.clientX;
y = e.clientY;
coor += 'client Coordinates: ' + x + ', ' + y + '<br />';
// Returns the X/Y coordinates of the mouse pointer relative to
// the position of the edge of the target element
x = e.offsetX;
y = e.offsetY;
coor += 'offset Coordinates: ' + x + ', ' + y + '<br />';
// Returns the X/Y coordinates of the mouse pointer, relative to
// the document, when the mouse event was triggered region
x = e.pageX;
y = e.pageY;
coor += 'page Coordinates: ' + x + ', ' + y + '<br />';
// Returns the X/Y coordinates of the mouse pointer, relative to
// the screen, when an event was triggered
x = e.screenX;
y = e.screenY;
coor += 'screen Coordinates: ' + x + ', ' + y + '<br />';
// Returns the X/Y coordinates of the mouse pointer relative to
// the position of the last mousemove event
x = e.movementX;
y = e.movementY;
coor += 'movement Coordinates: ' + x + ', ' + y + '<br />' +
'<br />';
// Returns the X/Y coordinates of the mouse pointer relative to
// the position of the edge of the target element
x = e.offsetX;
y = e.offsetY;
coor += 'offset Coordinates: ' + x + ', ' + y + '<br />' +
'<br />';
coor += 'Height of box(h2): ' + h2 + ' table(h4): ' + h4 +
'<br />' +
'Width of box(w2): ' + w2 + ' table(w4): ' + w4 +
'<br />';
coor += 'Scroll Height of table(sH2): ' + sH2 + '<br />' +
'Scroll Width of table(sW2): ' + sW2 + '<br />' +
'<br />';
document.querySelector( 'table > tbody > tr:first-of-type > td' )
.innerHTML =
( ( ( e.type === 'mousedown' ) || ( e.type === 'mousemove' ) )
? 'Mouse dragging ...'
: 'Mouse <b><u>not</u></b> dragging,' );
coor += 'x * xS2: ' +
'( ' + x + ' * ' + xS2 + ' ) = ' + ( x * xS2 ) +
'<br />' +
'y * yS2: ' + '( ' + y + ' * ' + yS2 + ' ) = ' +
( y * yS2 ) + '<br /><br />';
if( e.type === 'mouseout' ) {
if( e.offsetX < 0 )
x = 0;
else if( e.offsetX > w1 )
x = Number.MAX_SAFE_INTEGER;
if( e.offsetY < 0 )
y = 0;
else if( e.offsetY > h1 )
y = Number.MAX_SAFE_INTEGER;
}
$( div2 ).scrollLeft( x * xS2 ).scrollTop( y * yS2 );
$( div3 ).scrollLeft( x * xS3 ).scrollTop( y * yS3 );
x = div2.scrollLeft;
y = div2.scrollTop;
}
else {
coor = 'Height of box(h2): ' + h2 + ' table(h4): ' + h4 +
'<br />' +
'Width of box(w2): ' + w2 + ' table(w4): ' + w4 +
'<br />';
coor += 'Scroll Height of table(sH2): ' + sH2 + '<br />' +
'Scroll Width of table(sW2): ' + sW2 + '<br />' +
'<br />';
x = ~~document.getElementById( 'xDrag' ).value;
y = ~~document.getElementById( 'yDrag' ).value;
coor += 'simulated Coordinates: ' + x + ', ' + y + '<br />' +
'<br />';
document.querySelector( 'table > tbody > tr:first-of-type > td' )
.innerHTML = 'Simulated Mouse dragging ...';
div2.scrollTo ( 0, 0 );
div3.scrollTo ( 0, 0 );
countX = countY = lastX = lastY = 0;
x2 = x * xS2 + div2.scrollLeft;
y2 = y * yS2 + div2.scrollTop;
x3 = x * xS3 + div3.scrollLeft;
y3 = y * yS3 + div3.scrollTop;
if( e.innerText === 'Simulate Mouse-Drag' )
coor += 'amount to scroll-x: ' + x + '<br />' +
'amount to scroll-y: ' + y + '<br />' +
'<br />';
do {
$( div2 ).scrollLeft( x2 ).scrollTop( y2 );
$( div3 ).scrollLeft( x3 ).scrollTop( y3 );
x = div2.scrollLeft;
y = div2.scrollTop;
if( ( e.innerText === 'Simulate Mouse-Dragging' ) ) {
// 'Simulate Mouse-Dragging' -- do until horizontal and
// vertical scrolling stops.
if( ( x2 === lastX ) && ( y2 === lastY ) ) {
coor += 'horizontal scroll count: ' + countX + '<br />' +
'vertical scroll count: ' + countY + '<br />' +
'<br />';
break;
}
else {
if( x2 !== lastX ) ++countX;
if( y2 !== lastY ) ++countY;
lastX = x2;
lastY = y2;
x = div3.scrollLeft;
y = div3.scrollTop;
x3 = xD * xS3 + x;
y3 = yD * yS3 + y;
x = div2.scrollLeft;
y = div2.scrollTop;
x2 = xD * xS2 + x;
y2 = yD * yS2 + y;
}
}
else
break; // 'Simulate Mouse-Drag' -- do only once.
} while( true );
}
coor += 'amount scrolled-x: ' + x + '<br />' +
'amount scrolled-y: ' + y + '<br />' +
'<br />';
document.getElementById( 'demo' ).innerHTML = coor;
}
</script>
</body>
</html>谢谢。
我没有对此问题有任何答复，所以我在different way中提出了该问题，并且回答了该问题，因此与其他问题的链接也可以作为对该问题的答案。