计时对象的可见性时间

我想知道一个物体(至少50%(是否可见。这就是我对这段代码所做的。

我想改进我的代码以了解此对象可见的时间。我不知道如何在日期到达视口时获取日期，并在它不再可见时获取日期。

我的代码在控制台中返回每次滚动时的所有"真"和"假"，那么，是否可以在第一个"真"处获取日期，并在它变为"假"时获取新的日期？

提前感谢，

<html>
<head>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<img id="image_test" width="300" height="200" src="https://image.flaticon.com/icons/svg/23/23656.svg" alt="100" />
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<script>
window.onload = function() {
		var isInViewport = function (elem) {
		var bounding = elem.getBoundingClientRect();
		return (
	bounding.top >= -0.5 * elem.height &&
	bounding.left >= 0 &&
		bounding.bottom <= 1.15 * (window.innerHeight || document.documentElement.clientHeight) && 
	bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
		);
		};
		
		var player = document.getElementById('image_test');
		
		window.addEventListener('scroll', function () {
			canUserSeeIt = isInViewport(player);
			console.log(canUserSeeIt);
		}, false);
};		

</script>
</body>
</html>

修改后的这段代码将告诉：

对象可见的时间(以毫秒为单位(

当物体变得不可见时

window.onload = function() {
var start = new Date();
var stillVisible = true;
var isInViewport = function (elem) {
var bounding = elem.getBoundingClientRect();
return (
bounding.top >= -0.5 * elem.height &&
bounding.left >= 0 &&
bounding.bottom <= 1.15 * (window.innerHeight || document.documentElement.clientHeight) && 
bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
var player = document.getElementById('image_test');
window.addEventListener('scroll', function () {
canUserSeeIt = isInViewport(player);
if (stillVisible && !canUserSeeIt){
var now = new Date(); // Becomed invisible
stillVisible = false;
var visibleTime = now - start; // How long has been visible
console.log(now, visibleTime);
}
console.log(canUserSeeIt);
}, false);

};

https://jsbin.com/wuqegedeyo/edit?html,output

相关内容

最新更新

热门标签：