Question

当我按视频播放时，尝试向下滚动具有大量数据的div。

我遇到一个奇怪的问题，其中我的scrollTop是211.25但我的scrollHeight是711而clientHeight是500px

我不得不在scrollTop上放置一个Math.floor，以使其达到偶数。

这个.25px来自哪里？

HTML：

<video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload" controls>
  <source src="http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.mp4" type="video/mp4"></source>
  <p>Sorry, your browser does not support the &lt;video&gt; element.</p>
</video> 
<div id="data-scroll">
   SOME DATA
   SOME DATA
   SOME DATA
   SOME DATA
   SOME DATA
   SOME DATA

</div>

CSS：

#v0 {
  width: 100%;
  height: 200px;
}

#data-scroll {
  width: 500px; 
  height: 500px;
  overflow-y: scroll; 
  border: solid red 10px;
}
#footer {
  height: 400px;
}

JAVASCRIPT：

(function(){
  var vid = document.getElementById('v0'); 
  var dataScroll = document.getElementById('data-scroll');
  var controls = document.getElementById('controls');


  function playScroll(){
      console.log(`clientHeight:${dataScroll.clientHeight}`);
      console.log(`scrollHeight: ${dataScroll.scrollHeight}`);
      console.log(`scrolling dataScroll @ ${dataScroll.scrollTop}`);
      script.scrollTop += 100;
      if(dataScroll.scrollHeight - Math.floor(dataScroll.scrollTop) === script.clientHeight){
        console.log(`stop scrolling dataScroll @ ${dataScroll.scrollTop}`);
        window.cancelAnimationFrame(playScroll);
      }
      window.requestAnimationFrame(playScroll);
    }

  vid.addEventListener('play', function(){
    window.requestAnimationFrame(playScroll);
  });
}());

为什么scrollTop具有小数部分？

0 个答案: