需要帮助计算 jquery 元素 scrollleft 和 scrolltop 函数的参数值

Question

已更新

我从使用 jquery scrollLeft 和 scrollTop 函数切换到 javascript scrollTo 函数，它允许我将滚动条分配合并到一个调用中，并且不需要 jquery开销。

背景

我正在创建一个查看器，允许用户在 'control' 框中拖动鼠标或使用 vertical/horizontal 围绕 'display' 框的滚动条来显示 table 和另一个 'display' 图片框。两个 'display' 框周围的滚动条独立定位各自框的内容。除了用作普通滚动条外，它们还向用户显示每个 'display' 框中显示的是 'display' 框内容的哪一部分。没有滚动条，鼠标拖动不会让您知道内容有多大。 'display' 框使用 overflow: auto; css/style 属性在必要时显示滚动条。

下面是演示页面中重要控件和显示的布局，包括在内：

鼠标拖动 'control' 框位于屏幕的左上角。 table 'display' 框位于屏幕的中上部。图片 'display' 框位于屏幕的右上角。

这些框下方是两行 x 和 y 缩放输入。第一组用于 table 'display' 框。第二组用于图像 'display' 框。

缩放输入下方是一组输入和一个按钮，允许您设置滚动条移动的水平和垂直像素数，以及一个设置更新滚动条的按钮。我用它来确定两个 'display' 框的正确缩放值，但产生的结果与使用鼠标拖动 'control' 框不同，所以虽然它确实移动了滚动条，但我发现它对我来说有点死胡同。

在这些输入和按钮下方是一个按钮，用于自动计算滚动条需要按上述输入中指定的像素数量递增移动的次数。这仅适用于 table 'display' 框，并且由于与上述控件相同的原因也是一个死胡同。

在这些下面都是两个信息输出区。第一个显示有关 'control' 和 table 'display' 框的鼠标事件和大小的信息，但不显示图像 'display' 框的信息。第二个显示输入到缩放输入中的值，这有助于跟踪您在为每个 'display' 框确定正确值时尝试过的缩放值。

问题

到目前为止我还没有弄清楚鼠标拖动 'control' 框和两个 'display' 框的大小之间的关系，所以我不得不手动确定这些值反复试验。如果缩放值不是 'close-enough'，那么两个 'display' 框中的 'display' 框的内容将不会与 'control' 框中的鼠标拖动移动正确同步.

我用图像 'display' 框更新了这个问题，因此可以看出每个 'display' 内容项的缩放值不同。此外，如果 'content' 项的大小发生变化，例如放大或缩小图像时，缩放值也会发生变化。

这就是为什么我真的需要有关如何正确计算它们的帮助。

<!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;">&#x2732;</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:&nbsp;
      <input type="number" id="xScale2" min="0" value="1.6"
             onchange="document.getElementById( 'values' ).innerHTML =
                        'xScale2: ' +
                        this.value + '<br />' +
                        document.getElementById( 'values' ).innerHTML;" />
    </label>&nbsp;&nbsp;&nbsp;&nbsp;
    <label>Y-Scale 2:&nbsp;
       <input type="number" id="yScale2" min="0" value="4.5"
              onchange="document.getElementById( 'values' ).innerHTML =
                        'yScale2: ' +
                        this.value + '<br />' +
                        document.getElementById( 'values' ).innerHTML;" />
    </label>&nbsp;&nbsp;&nbsp;&nbsp;
    <button onclick="overlay( this );">
      Overlay the table with the control box
    </button><br /><br />
    <label>X-Scale 3:&nbsp;
      <input type="number" id="xScale3" min="0" value="2.45"
             onchange="document.getElementById( 'values' ).innerHTML =
                        'xScale3: ' +
                        this.value + '<br />' +
                        document.getElementById( 'values' ).innerHTML;" />
    </label>&nbsp;&nbsp;&nbsp;&nbsp;
    <label>Y-Scale 3:&nbsp;
       <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:&nbsp;
      <input type="number" id="xDrag" value="1" />
    </label>&nbsp;&nbsp;&nbsp;&nbsp;
    <label>Y-Drag:&nbsp;
      <input type="number" id="yDrag" value="1" />
    </label>&nbsp;&nbsp;&nbsp;&nbsp;
    <button onclick="mousemove( this );">
      Simulate Mouse-Drag
    </button>&nbsp;&nbsp;&nbsp;&nbsp;
    <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>

谢谢。

Answer 1

这个问题我没有得到任何回复，所以我在中提出了这个问题，并且那个问题得到了回答，所以这个 link 对另一个问题作为也回答这个问题。

需要帮助计算 jquery 元素 scrollleft 和 scrolltop 函数的参数值

Need help calculating the parameter values for jquery element scrollleft and scrolltop functions

parameters

jquery

scaling

scroll

function