如何找到当前位于屏幕中央的div
[英]How to find the div which is currently at the center of the screen
问题描述
My HTML page contains multiple div elements one below the other. 
我的HTML页面包含多个div元素，一个在另一个之下。 The basic layout of the page is 页面的基本布局是
<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>
there can be 100's of such div. 可能有100个这样的div。 But i want to perform a specific action on the div which is currently in the center of the screen. 但我想在当前位于屏幕中央的div上执行特定操作。
One way of doing this can be using the offset function. 一种方法是使用偏移功能。
What is the best way to find the div currently at the center of the screen? 查找当前位于屏幕中心的div的最佳方法是什么？
1 个解决方案
解决方案1
0 2016-06-25 12:52:20
You can use the :in-viewport selector provided by the isInViewport jQuery plugin to select all currently visible divs. 您可以使用isInViewport jQuery插件提供的:in-viewport选择器来选择所有当前可见的div。 Then you can pick the middle one (it should be close to the center of the screen) and interact with it. 然后，您可以选择中间的那个（它应该靠近屏幕的中心）并与之交互。
See the demo in the snippet below. 请参阅下面的片段中的演示。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.