当我在视频上按下播放按钮时,尝试向下滚动包含大量数据的 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 <video> 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有小数部分?
因为网络规范作者出于某种奇怪的随机原因而喜欢它,字面上。
您最有可能正在寻找的是:
// 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)
但我们也可以使用它在页面中任何位置嵌套的任何元素内滚动。
就我而言,Math.ceil 是解决方案。对于 Math.round 或 Math.floor,我总是有一个值太低。
Math.ceil(scrollTop) >= scrollHeight - clientHeight