如何使用JavaScript检查元素是否真的可见？
要使用JavaScript检查元素是否真的可见，可以使用以下方法：
- 使用
getComputedStyle方法获取元素的计算样式，并检查display和visibility属性。
function isVisible(element) {
const style = window.getComputedStyle(element);
return style.display !== 'none' && style.visibility !== 'hidden';
}- 使用
offsetWidth和offsetHeight属性检查元素的尺寸是否为0。
function isVisible(element) {
return element.offsetWidth > 0 && element.offsetHeight > 0;
}- 使用
getBoundingClientRect方法获取元素的边界矩形，并检查元素是否在视口内。
function isVisible(element) {
const rect = element.getBoundingClientRect();
return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
}- 使用
IntersectionObserverAPI检查元素是否在视口内。
function isVisible(element) {
return new Promise((resolve) => {
const observer = new IntersectionObserver((entries) => {
const entry = entries[0];
resolve(entry.isIntersecting);
});
observer.observe(element);
});
}这些方法可以帮助您检查元素是否真的可见。请注意，这些方法可能不适用于所有情况，您可能需要根据您的具体需求进行调整。
相关·内容
我有一个类似数组的节点对象(它是一个carousel)，它们的顺序是在每次页面刷新时随机生成的，playwright发现所有元素都是可见的，但其中一些元素在视区之外(基于收到的错误)。我需要确保，当尝试单击该元素时，该元素在视口内，否则我会收到一个错误，指出该元素在视口外。
如何确定类似数组的对象的随机拾取的节点元素是否实际位于视口中？
浏览 26提问于2021-03-04得票数 0
这是我的密码。非常简单，我想知道一个元素是否在视图中。
因为某种原因我无法理解我一直在变的不清楚。元素存在，但什么也没有发生。
在我看到的x中，q却从未出现过。
async function isItemInViewport( page ) {
console.log( 'x' );
await page.evaluate( () => {
console.log( 'q' );
const lastMenuItem = document.querySelectorAll( '.nav-menu--d
浏览 6提问于2022-11-16得票数 0
3回答
我使用这个脚本隐藏一个div，并在滚动过页面中的某个点时显示它。这是很好的工作，但当我滚动回顶部，div然后保持可见。有人能帮我修改一下代码吗?当我在期望的点上方滚动时，可以再次隐藏div吗？
谢谢你，T
$(document).ready( function() {
$("#dvid").hide(); //hide your div initially
var topOfOthDiv = $("#othdiv").offset().top;
$(window).scroll(function() {
if($(window).scrollTop()
浏览 7提问于2017-06-14得票数 0
回答已采纳
2回答
我正在寻找一种方法，以改变URL到我的网站上的另一个网页，一旦网站检测到用户已经滚动。( JavaScript)
我是一个设计师，所以不是超级的代码，谁能帮助或有任何想法？
我找到了"}object.onscroll = function(){myScript};“作为一段检测滚动的代码(我认为？)。
如能提供任何帮助，将不胜感激:)
浏览 6提问于2022-07-23得票数 0
我有一个用CSS和HTML制作的图表，在这个图表中有一个图表加载动画。我只想在滚动包含图表的div视图时启动此动画。
我只想在页面上的图表上收费，我知道我必须使用javascript，但我是JS的初学者，所以我不知道是否有可能做这样的事情。
这是图表的小提琴：
HTML
<ul class="chart">
<li>
<span style="height:5%; background: rgba(0, 102, 255, 0.80);" title="ActionScript"></spa
浏览 13提问于2017-06-21得票数 1
回答已采纳
1回答
简单地说，我有一个带有类别列表的侧边栏。在正文中，我列出了许多卡片，每个卡片对应于侧边栏列表中的一个类别。 目标:当我滚动页面时，我希望在侧边栏中突出显示正确的类别。 尝试:我在这个CodePen中尝试了一段时间，但不知何故，我似乎不能完全正确地完成它。 下面是我的代码： /* Menu - Show active */
const newsItems = document.querySelectorAll('.item');
function highlightMenuItem() {
newsItems.forEach((el)
浏览 19提问于2021-08-04得票数 0
1回答
水平网站的过渡和动画
、、、
我正在创建一个横向网站。当元素显示在屏幕上时，我希望将过渡和动画应用于元素。但是现在，在页面本身加载时，所有的过渡和动画都应用于所有元素。我尝试过(:visible)，但它不起作用。因此，请指导我如何在元素显示在屏幕上时将过渡应用于元素。提前谢谢。
浏览 0提问于2017-02-10得票数 0
1回答
我有一个步骤来检查这里的页脚可见性。
And (/^the footer appears$/) do
within("div.footer") do
assert_selector "a", :text=> "About"
...
end
end
基本上，我加载页面并滚动到底部，然后执行此检查，但我也注意到，这一步骤可以工作，而不必滚动到底部。我做了一些测试，发现这个步骤只检查整个页面上的可见性。它不检查视口内的可见性。
我希望有一个检查，只有当元素在视口内通过。如果没有Rspec和单独的capybara
浏览 2提问于2018-03-30得票数 2
回答已采纳
我有一个指令，我正在使用它作为属性。该指令添加并移除一个类，该类将触发css动画以淡出div。我在页面上的多个位置都有这种情况；但是，一旦第一个div获取了值，其余的div(这是不可见的)也会选择这个值。如何使这些指令独立工作？
指令：
.directive("scroll", function ($window) {
return function (scope, element, attrs) {
function getScrollOffsets(w) {
// Use the specified window or the current w
浏览 1提问于2015-06-01得票数 1
回答已采纳
点击html主体:如果元素'#cap‘是可视的，那么做一些事情。如果元素'#cap‘由于被滚动而不可见，请做其他的事情。
我尝试了@Heretic的建议，并将函数移到js文件的底部，但这根本行不通。
根据版主的要求，我说我尝试了@Heretic的建议，并将函数移到js文件的底部，但这根本行不通。
<thead id = 'cap'>
function isInViewport(el) {
rect = el.getBoundingClientRect();
return (rect.top >= 0 && rect.
浏览 13提问于2022-08-30得票数 0
回答已采纳
在我的应用程序中，有一个消息传递自定义元素。
我只想在元素当前不可见(或在视口之外)的情况下向用户发送特定的通知。
用聚合物怎么做到这一点呢？
浏览 4提问于2017-02-22得票数 4
1回答
$('.lorem').click(function() {
$('.active').removeClass('active');
$(this).addClass('active');
});
$(document).keydown(function(e){
e.preventDefault();
var i = $('.active').index('.lorem') + 1;
var next = $('.lorem').eq(i);
$(&
浏览 3提问于2018-08-13得票数 0
回答已采纳
我试图添加样式到滑块，检查项目是否在视窗内，这是很好的工作，直到我绝对定位项目父容器在屏幕外使用左：-500 by；例如。
下面是我最初尝试使用的代码。
document.addEventListener("DOMContentLoaded", function() {
var customSlides = document.getElementsByClassName("slide");
function checkForScroll(){
var customVisibleFraction = 0.75;
for(var i = 0; i &
浏览 2提问于2022-04-14得票数 3
2回答
使用jQuery，我想更改当前窗口中所有元素的颜色。页面会滚动，但我不希望滚动出视图的元素--我看不到--只显示当前视图窗口中的元素。
浏览 2提问于2011-07-25得票数 1
回答已采纳
在指令的链接函数部分，我们可以访问element对象。我希望确定element对象是否在当前视口中/是否可用。
我目前有以下内容：
link: function (scope, element, attrs, controller) {
var page = angular.element(window);
page.bind('scroll', function () {
var windowScroll = page[0].pageYOffset,
浏览 0提问于2014-06-11得票数 9
回答已采纳
1回答
滚动上的动画元素
、、
当用户滚动页面时，我想动画一个div。
为此，我实现了以下代码：
var slide = jQuery(".apresentacao-spc-01");
var opening = false;
var closing = false;
var pos = jQuery(window).scrollTop();
jQuery(window).scroll(function() {
var pos = jQuery(window).scrollTop();
console.log(pos);
if (pos > 100) {
if
浏览 1提问于2013-12-16得票数 0
回答已采纳
1回答
我想知道是否有人有一个简单的解决办法。我正在尝试检测HTML元素的任何部分是否位于视口之外。我尝试使用以下代码：
$.fn.isOnScreen = function(){
var win = $(window);
var viewport = {
top : win.scrollTop(),
left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.heig
浏览 3提问于2014-02-10得票数 10
回答已采纳
30回答
有没有一种有效的方法来判断DOM元素(在HTML中)当前是否可见(出现在视图中)？
(这个问题涉及到Firefox。)
浏览 41提问于2008-09-23得票数 1212
回答已采纳
2回答
我有许多tr在可见区域中生成滚动条，tr每个都有自己的id，我如何知道它是否在滚动条的可视区域中，如果不在，如何使用Jquery将其放在可见区域中？
<tr align="center" id="100"><td><a> info </a></td></tr>
<tr align="center" id="101"><td><a> info </a></td></tr>
<tr al
浏览 3提问于2013-04-19得票数 0
回答已采纳
1回答
如何使视口变大
、、
我试图使一个视频播放自动(如果是)，当它在视口。现在的问题是，视频需要大，所以为了让它在视口，用户几乎不可能滚动到该部分，所以视频是死中心.
我想知道如何解决这个问题，如果你有任何想法，请告诉我。
我在考虑如果一个元素在视图中返回的函数，如下所示：
也许我能把视野变大？
浏览 2提问于2022-05-27得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
