Question

我的HTML页面包含多个div元素，一个在另一个之下。页面的基本布局是

<html>
<head>
    <title>
        xyz
    </title>
    <link id="font" href="https://fonts.googleapis.com/css?family=Montserrat:400,700&amp;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的最佳方法是什么？

Answer 1

您可以使用isInViewport jQuery插件提供的:in-viewport选择器来选择所有当前可见的div。然后你可以选择中间的一个（它应该靠近屏幕的中心）并与之交互。

请参阅下面代码段中的演示。

＆＃13;

function highlightDivInTheMiddle() {
  var divs = $(".divs > div:in-viewport");
  var middleDiv = divs[Math.floor(divs.length / 2)];
  $(".highlighted").removeClass("highlighted");
  $(middleDiv).addClass('highlighted');
}

＆＃13;

button {
  position: fixed;
  top: 0;
  right: 0;
}
.divs > div {
  height: 100px;
  margin-bottom: 10px;
  border: 1px solid black;
}
.divs > .highlighted {
  background: red;
}

＆＃13;

<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>

＆＃13;

如何找到当前位于屏幕中心的div

1 个答案: