Why does scrollTop has a fractional part?

Trying to scroll down a div with a lot of data when I press play on a video.

I get this weird issue where my scrollTop is 211.25 but my scrollHeight is 711 and clientHeight is 500px

I had to put a Math.floor on scrollTop to get it to an even number.

Where is this .25px coming from?

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);
  });
}());