Question

我一直在尝试创建一个脚本，让用户知道#x元素是否处于完整视图中，因此我有一个if if条件语句来确定这一点。

在这种情况下触发了if条件

如果#x元素可以在网页中完全看到。

在以下情况下会触发else条件。

根本看不到#x元素，或者只能看到#x元素的一部分。

情况1：

窗口足够小，无法再看到#x元素，或者 #x元素的视图不完整。

情况2：

CSS定位用于使#x元素在网页视图中看不见或不完整。

情况3：

#x元素太大，网页无法完全看到，因此无论是否有滚动条，都将显示其中的一部分。因此，即使#x元素不在视野范围内，否则else条件也会被触发。

情况4：

其他元素会将#x元素推到视线之外，或者将#x元素推到恰好足以在网页中仅一部分#x元素可见的位置。

抬头

那我该怎么做呢？我做了很多尝试来尝试自己解决这个问题，但是还算运气不好，所以请仅使用纯JavaScript提供代码示例，不要使用jQuery示例或文章或其他文章的链接。过去我曾问过类似的问题，但仍然没有运气。我刚去过

对我一直得到的答复感到沮丧，现在我怀疑这是否有可能做到。我不是要你们中的任何人为我做代码，我只是想问你们中是否有任何人可以提供代码示例以及如何做到这一点，因为我最好是这样才能学会的

我现在的代码

/*
????
if(???){
   var status='You can see #x completely in the web page.';
}

else{
  var status='You can not see #x completely in the web page.';
}

document.querySelector('#status-output').innerHTML= status;

*/

html{
  background-color: dodgerblue;
}

#x{
  position: absolute;
  top: -5px; /*<-- This should trigger the else condition because this makes the element not completely in view on the web page.*/
  left: 15px;
  background-color: lime;
  height: 150px;
  width: 150px;
  border: 3px solid black;
}

#status-output{
  position: absolute;
  top: 150px;
}

<div id='x'></div>

<p id='status-output'></p>

Answer 1

我已经根据您的代码制作了这个实例。 checkSeen函数是检查元素是否可以基于其位置而需要的功能。我还添加了一个间隔来移动<div>，以便您可以根据<div>的位置查看状态更新。希望有帮助。

function checkSeen(id){
	var x = document.getElementById(id);
	
	if(x.offsetTop < 0 ) return false;
	if(x.offsetLeft < 0 ) return false;
	if(x.offsetTop + x.offsetHeight > window.innerHeight) return false;
	if(x.offsetLeft + x.offsetWidth > window.innerWidth) return false;
	
	return true;
}

function updateStatus(seen){
	if(seen){
	   var status='You can see #x completely in the web page.';
	}else{
	  var status='You can not see #x completely in the web page.';
	}
	document.querySelector('#status-output').innerHTML= status;
}


updateStatus(checkSeen("x"));

var testMovingInterval = setInterval(function(){
	var x = document.getElementById("x");
	if(x.offsetTop - window.innerHeight > 100){
		x.style.top = "-100px";
	}else{
		x.style.top = (x.offsetTop + 1) + "px";
	}
	
	
	
	
	updateStatus(checkSeen("x"));
	
	
	
}, 10);

html{
  background-color: dodgerblue;
}

#x{
  position: absolute;
  top: -5px; /*<-- This should trigger the else condition because this makes the element not completely in view on the web page.*/
  left: 15px;
  background-color: lime;
  height: 150px;
  width: 150px;
  border: 3px solid black;
}

#status-output{
  position: absolute;
  top: 150px;
}

<div id='x'></div>

<p id='status-output'></p>

Answer 2

类似的东西：

const winTop = window.pageYOffset || document.documentElement.scrollTop;
const winLeft = window.pageXOffset || document.documentElement.scrollLeft;
const winWidth = window.innerWidth || document.documentElement.clientWidth;
const winHeight = window.innerHeight || document.documentElement.clientHeight;
const xElem = document.getElementById('x').getBoundingClientRect();

const doesFit = xElem.top >= winTop &&
  xElem.left >= winLeft &&
  xElem.top + xElem.height <= winHeight &&
  xElem.left + xElem.width <= winWidth;

const status = `You ${doesFit ? 'can' : 'can not'} see #x completely in the web page.`;

检查x元素是否在网页中完整显示

2 个答案: