html offsetTop，clientTop，scrollTop，offsetLeft ...之间的差异...

Posted 2021-05-11

<style>
 body{
   background-color: #ddd;
 }
 .container{
   height:200px;
   width: 400px;

   border-style:dashed;
   border-color:#aaa;

   margin:150px auto;

   /* overflow:hidden; */
   overflow:scroll;
 }
 .content{
   width:640px;
   height:292px;
   background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Leonardo_Da_Vinci_-_Annunciazione.jpeg/320px-Leonardo_Da_Vinci_-_Annunciazione.jpeg);
   background-size: 640px 292px;
 }
 .scroll-x {
   background-color: rgba(0,0,0,0);
   border:2px;
   border-style:solid;
   border-color:#00c;
   color:#00c;
   position:absolute;
 }
 .client-x {
   background-color: rgba(0,0,0,0);
   border-top-width:0;  border-left-width:0;
   border-bottom-width:2px; border-right-width:2px;
   border-style:solid;
   border-color:#0c0;
   color:#0c0;
   position:absolute;
 }
 .offset-x {
   background-color: rgba(0,0,0,0);
   border-top-width:2px;  border-left-width:2px;
   border-bottom-width:0; border-right-width:0;
   border-style:solid;
   border-color:#f00;
   color:#f00;
   position:absolute;
 }
</style>

<form id="container-border-control" action="javascript:false">
  <label for="value">border-width:</label>
  <input type="text" name="value">
  <button type="button" name="swap">swap !</button>
</form>
<button id="scroll-button">scroll !</button>
<div id="container" class="container">
  <div class="content"></div>
</div>


<p>
  <a href="https://commons.wikimedia.org/wiki/Commons:Reuse_of_PD-Art_photographs#Japan">Reuse of PublicDomain-Art photographs</a>
</p>

see also:
<ul>
  <li><a href="http://stackoverflow.com/questions/22675126/what-is-offsetheight-clientheight-scrollheight/22675563#22675563">What is offsetHeight, clientHeight, scrollHeight? | stackoverflow</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop">offsetTop | MDN</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop">clientTop | MDN</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop">scrollTop | MDN</a></li>
  <li><a href="http://jsfiddle.net/shibualexis/yVhgM/3/">http://jsfiddle.net/shibualexis/yVhgM/3/</a></li>
</ul>

<script>
 (function(){
   var container = document.getElementById('container');
   var refreshes = [];
   container.style.borderWidth = 20; // initial value
   var container_border_ctrl = document.getElementById('container-border-control');
   container_border_ctrl.elements.value.value = container.style.borderWidth;
   container_border_ctrl.elements.swap.addEventListener('click',function(){
     container.style.borderWidth = container_border_ctrl.elements.value.value;
   });

   function refresh(src, dest, echo, prop_prefix, compute_left, compute_top) {
     var width_prop  = prop_prefix+'Width';
     var height_prop = prop_prefix+'Height';
     var top_prop  = prop_prefix+'Top';
     var left_prop = prop_prefix+'Left';

     dest.style.left       = compute_left(src) + 'px';
     dest.style.top        = compute_top(src) + 'px';
     dest.style.height     = src[height_prop]+'px';
     dest.style.width      = src[width_prop] +'px';
     echo.innerHTML = width_prop + ' X ' + height_prop +
                      '( ' + src[width_prop] + ' x '+ src[height_prop] + " ),<br />" +
                        top_prop + ' X ' + left_prop +
                        '( ' + src[top_prop] + ' x '+ src[left_prop] + ' )';
   }

   refreshes.push((function(){
     var frame = document.createElement("div");
     var echo  = document.createElement("div");
     document.body.appendChild(frame);

     frame.appendChild(echo);
     frame.classList.add('offset-x');

     echo.style.marginTop = '-2.5em';

     var $refresh = refresh.bind(null, container, frame, echo, 'offset',
                                 function(elm){return elm.offsetLeft;},
                                 function(elm){return elm.offsetTop;});
     return $refresh;
   })());

   refreshes.push((function(){
     var frame = document.createElement("div");
     var echo  = document.createElement("div");
     document.body.appendChild(frame);

     frame.appendChild(echo);
     frame.classList.add('client-x');

     echo.style.position = 'absolute';
     echo.style.bottom = 0;
     echo.style.right = 0;
     echo.style.marginBottom = '-4.5em';

     var $refresh = refresh.bind(null, container, frame, echo, 'client',
                                 function(elm){return elm.offsetLeft + elm.clientLeft;},
                                 function(elm){return elm.offsetTop  + elm.clientTop;});
     return $refresh;
   })());

   refreshes.push((function(){
     var frame = document.createElement("div");
     var echo  = document.createElement("div");
     document.body.appendChild(frame);

     frame.appendChild(echo);
     frame.classList.add('scroll-x');

     echo.style.position = 'absolute';
     echo.style.bottom = 0;
     echo.style.right = 0;
     echo.style.marginBottom = '-2.5em';

     var $refresh = refresh.bind(null, container, frame, echo, 'scroll',
                                 function(elm){return elm.offsetLeft + elm.clientLeft - elm.scrollLeft;},
                                 function(elm){return elm.offsetTop  + elm.clientTop  - elm.scrollTop;});
     window.addEventListener('resize',$refresh);
     $refresh();

     document.getElementById('scroll-button').onclick = function(){
       (new Promise(function(next) {
         var max = container.scrollWidth - container.clientWidth
         var step = Math.floor(max / 20);
         function loop(amount){
           $refresh();
           setTimeout(function() {
             container.scrollLeft = amount;
             if (amount < max) loop(Math.min(amount+step, max));
             else              next();
           }, 100);
         }
         loop(0);
       })).then(function() {
         return new Promise(function(next) {
           var max = container.scrollHeight - container.clientHeight;
           var step = Math.floor(max / 20);
           function loop(amount){
             $refresh();
             setTimeout(function() {
               container.scrollTop = amount;
               if (amount < max) loop(Math.min(amount+step, max));
               else              next();
             }, 100);
           }
           loop(0);
         });
       }).then(function () {
         return new Promise(function(next) {
           var top_step  = Math.floor(container.scrollTop  / 20);
           var left_step = Math.floor(container.scrollLeft / 20);
           function loop(amount_top, amount_left){
             $refresh();
             setTimeout(function() {
               container.scrollTop  = amount_top;
               container.scrollLeft = amount_left;
               if (amount_top >= 0) loop(Math.max(amount_top  - top_step, 0),
                                         Math.max(amount_left - left_step, 0));
             }, 100);
           }
           loop(container.scrollTop, container.scrollLeft);
         });
       })
     }
     return $refresh;
   })());

   refreshes.forEach(function(r){
     r();
     window.addEventListener('resize',r);
     container_border_ctrl.elements.swap.addEventListener('click', setInterval.bind(null,r,0));
   });
 })();
</script>