为什么scrollTop有小数部分?

问题描述 投票:0回答:2

当我在视频上按下播放按钮时,尝试向下滚动包含大量数据的 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);
  });
}());
javascript html
2个回答
5
投票

为什么scrollTop有小数部分?

因为网络规范作者出于某种奇怪的随机原因而喜欢它,字面上。

您最有可能正在寻找的是:

// It reached the bottom.
Math.round(scrollTop) >= scrollHeight - clientHeight

到目前为止,这对我来说一直有效。我还不知道有什么更好的,但如果我发现了,我会更新它。

编辑:前一个并不总是有效。有时,四舍五入后

scrollTop
会略大于或小于
scrollHeight - clientHeight
,尤其是在缩放内容的情况下(例如缩放或 CSS 变换)。

这就是我现在正在使用的,效果很好,用

Math.abs
来处理或多或少的情况:

function isScrolledToBottom(el) {
    // NOTE: scrollTop is fractional, while scrollHeight and clientHeight are
    // not, so without this Math.abs() trick then sometimes the result won't
    // work because scrollTop may not be exactly equal to el.scrollHeight -
    // el.clientHeight when scrolled to the bottom.
    return Math.abs(el.scrollHeight - el.clientHeight - el.scrollTop) < 1
}

注意,我没有使用

window
API,仅使用元素 API,因为这适用于每种滚动情况,包括页面的顶层滚动。

对于顶级滚动,我们可以这样使用它:

isScrolledToBottom(document.documentElement)

但我们也可以使用它在页面中任何位置嵌套的任何元素内滚动。


0
投票

就我而言,Math.ceil 是解决方案。对于 Math.round 或 Math.floor,我总是有一个值太低。

Math.ceil(scrollTop) >= scrollHeight - clientHeight
© www.soinside.com 2019 - 2024. All rights reserved.