Updated
I switched from using the jquery scrollLeft and scrollTop functions to the javascript scrollTo function, which allows me to combine the scrollbar assignment into one call, and doesn't require the jquery overhead.
Background
I'm creating a viewer that lets the user mouse-drag in a 'control' box or use vertical/horizontal scrollbars around a 'display' box for a table and another 'display' box for an image. The scrollbars around the two 'display' boxes independently position the contents of their respective boxes. Besides working as normal scrollbars, they also show the user what part of the 'display' box content is being seen in each 'display' box. Without the scrollbar the mouse-drag doesn't give you any idea how big the contents are. The 'display' boxes use the overflow: auto; css/style property to show the scrollbars when necessary.
Here is the layout of the important controls and displays in the demo page, that is included, below:
A mouse-drag 'control' box is on the upper-left side of the screen. A table 'display' box is in the upper middle of the screen. An image 'display' box is on the upper-right side of the screen.
Below these boxes are two rows of x and y scaling inputs. The first set is for the table 'display' box. The second set is for the image 'display' box.
Below the scaling inputs is a set of inputs and a button that allows you to set the number of horizontal and vertical pixels to move the scrollbars by, and a button to set update the scrollbars with. I was using this to determine the proper scaling values for the two 'display' boxes, but is produced different results than using the mouse-drag 'control' box, so while it does move the scrollbar, I found that it was somewhat of a dead-end for me.
Below these inputs and buttons is a button to automatically count the number of times the scrollbars would need to be incrementally moved by the specified amount of pixels in the above inputs. This only works for the table 'display' box, and also is a dead-end for the same reason as the above controls.
Below all of these are two information output areas. The first one shows information about the mouse events and sizes of the 'control' and table 'display' boxes, but not the image 'display' box. The second one show the values that are entered into the scaling inputs, which is useful to help keep track of the scaling values that you've tried when determining the proper values for each 'display'box.
Problem
So far I haven't figured out the relationship between the sizes of the mouse-drag 'control' box and the two 'display' boxes, so I've had to manually determine these values by trial and error. If the scaling values aren't 'close-enough' then the 'display' boxes' contents in the two 'display' boxes won't properly synchronize with the mouse-drag movements in the 'control' box.
I updated this question with an image 'display' box, so it could be seen that the scaling values are different for each 'display' content item. Further, if the size of the 'content' item changes, say when the image is zoomed in or out, then the scaling values also change.
This is why I really need help with how to properly calculate them.
<!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>Thank you.
I didn't get any responses to this question, so I asked the question in a different way, and that question was answered, and so this link to the other question serves as the answer to this question, too.