我的 HTML 页面包含多个 div 元素，一个在另一个下面。页面的基本布局是
<html>
<head>
<title>
xyz
</title>
<link id="font" href="https://fonts.googleapis.com/css?family=Montserrat:400,700&text=" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body class="fullscreen">
<div id="surveyform">
<div class="form">
<ul class="questions">
<li class="group connected" id="q1">
<div class="wrapper">
<div class="item">
<span> 1 </span>
<div class="arrow">
<div class="arrow-right"></div>
</div>
</div>
<div class="question">
<span>Developer Intern</span>
</div>
<div class="content">
<div class="description">
Random Text
</div>
<div class="content-wrapper">
</div>
</div>
</div>
</li>
<li class="group connected" id="q2">
<div class="wrapper">
<div class="item">
<span> 2 </span>
<div class="arrow">
<div class="arrow-right"></div>
</div>
</div>
<div class="question">
<span>Developer Intern</span>
</div>
<div class="content">
<div class="description">
Random Text
</div>
<div class="content-wrapper">
</div>
</div>
</div>
</li>
<li class="group connected" id="q3">
<div class="wrapper">
<div class="item">
<span> 3 </span>
<div class="arrow">
<div class="arrow-right"></div>
</div>
</div>
<div class="question">
<span>Developer Intern</span>
</div>
<div class="content">
<div class="description">
Random Text
</div>
<div class="content-wrapper">
</div>
</div>
</div>
</li>
<li class="group connected" id="q4">
<div class="wrapper">
<div class="item">
<span> 4 </span>
<div class="arrow">
<div class="arrow-right"></div>
</div>
</div>
<div class="question">
<span>Developer Intern</span>
</div>
<div class="content">
<div class="description">
Random Text
</div>
<div class="content-wrapper">
</div>
</div>
</div>
</li>
<li class="group connected" id="q5">
<div class="wrapper">
<div class="item">
<span> 5 </span>
<div class="arrow">
<div class="arrow-right"></div>
</div>
</div>
<div class="question">
<span>Developer Intern</span>
</div>
<div class="content">
<div class="description">
Random Text
</div>
<div class="content-wrapper">
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div id="background">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</body>
可以有 100 个这样的 div。但我想对当前位于屏幕中央的 div 执行特定操作。
执行此操作的一种方法是使用偏移函数。
找到当前位于屏幕中心的 div 的最佳方法是什么？
最佳答案
您可以使用 isInViewport 提供的 :in-viewport 选择器用于选择所有当前可见的 div 的 jQuery 插件。然后你可以选择中间的那个(它应该靠近屏幕中心)并与之交互。
请参阅下面代码段中的演示。
function highlightDivInTheMiddle() {
var divs = $(".divs > div:in-viewport");
var middleDiv = divs[Math.floor(divs.length / 2)];
$(".highlighted").removeClass("highlighted");
$(middleDiv).addClass('highlighted');
}button {
position: fixed;
top: 0;
right: 0;
}
.divs > div {
height: 100px;
margin-bottom: 10px;
border: 1px solid black;
}
.divs > .highlighted {
background: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/zeusdeux/isInViewport/master/lib/isInViewport.min.js"></script>
<button onclick="highlightDivInTheMiddle()">Highlight div in the middle</button>
<div class="divs">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>关于javascript - 如何找到当前位于屏幕中心的div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38028460/