Question

如何使用getBoundingClientRect()获得以下结果？

现在具有以下功能，当100％的元素宽度位于视口内时，它将匹配。

function viewport_check(e) {

var ep = e.getBoundingClientRect();

    return (ep.left >= 0 && ep.right <= ($(e).outerWidth() || $(window).width())); 
}

我需要使其与基于百分比的值匹配，例如在这种情况下，如果视口中的元素在70％上，则我想使其匹配，而对于仅30％可见的元素，则不希望与之匹配。怎么做？

//我的尝试：

return ((ep.left+30) >= 0 && (ep.right-30) <= ($(e).outerWidth() || $(window).width()));

Answer 1

首先，您需要一种方法来计算给定boundingclientrect的面积：

function calcArea(rect){
    return (rect.right-rect.left) * (rect.bottom-rect.top)
}

然后确定视口内的矩形边界：

function clipRect(rect){
    return {
        left: Math.max(0, rect.left),
        top: Math.max(0, rect.top),
        right: Math.min(window.innerWidth, rect.right),
        bottom: Math.min(window.innerHeight, rect.bottom)
    }
}

总而言之，只需将修剪的rect的面积除以未修剪的rect的面积即可：

function calcOcclusion(element){
    var rect = element.getBoundingClientRect()
    var clipped_rect = clipRect(rect)
    return Math.max(0, calcArea(clipped_rect)/calcArea(rect))
}

如此：

console.log(Math.round(calcOcclusion(document.querySelector('#myElement'))*100),'% visible')

function clipRect(rect){
	return {
		left: Math.max(0, rect.left),
		top: Math.max(0, rect.top),
		right: Math.min(window.innerWidth, rect.right),
		bottom: Math.min(window.innerHeight, rect.bottom)
	}
}

function calcArea(rect){
	return (rect.right-rect.left) * (rect.bottom-rect.top)
}

function calcOcclusion(element){
	var rect = element.getBoundingClientRect()
	var clipped_rect = clipRect(rect)
	return Math.max(0, calcArea(clipped_rect)/calcArea(rect))
}


var elem = document.querySelector('#myElement')
window.onscroll = function(){
  elem.innerHTML = "I'm "+Math.round(calcOcclusion(elem)*100)+"% visible"
}

body{
  padding: 200px 0;
}

div{
  padding: 50px 20px 200px 20px;
  background-color: #eee;
}

<div id="myElement">
Scroll me
</div>

如果与getBoundingClientRect JS在70％上可见，则匹配

1 个答案: