javascript - 如何找到当前位于屏幕中心的div-6ren

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

转载作者：行者123 更新时间：2023-11-28 05:38:51

我的 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 的最佳方法是什么？

最佳答案

您可以使用 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/

文章推荐： html - 如何对齐两个 div 列之一

文章推荐： ios - 在响应式(Reactive)编程中创建静态流是个坏主意吗？

文章推荐： CSS - 无法在 3 秒内水平对齐图像

javascript - 位于 for-each 中的记录器的引用错误
我正在使用 javascript 并有以下类: const Product = require('../models').Product class ProductService { cons
Django NoReverseMatch 位于/display/
我正在开发一个简单的应用程序，宠物用户可以在其中创建关于他们宠物的板并在板上显示图片。我正在尝试创建一个功能，用户可以点击他们的图板，将他们重定向到他们的图板，该图板将显示他们所有的宠物图片。当我
javascript - $.ajax 位于 $.each 阻塞浏览器中
我有这样的事情:循环遍历 ids，并对每个 ids 向服务器(同一域)发出 ajax 请求 (async:true) 并将接收到的数据附加到 DOM 元素。这不是一项艰巨的任务，它确实有效。示例代码:
python - Django NoReverseMatch 位于/
我正在尝试使用 Pillow 在我的网络应用程序中添加用户可上传的图像。我创建了一个 Django Upload 模型并将其注册到 Admin 中。当我使用管理控制台添加照片后，我收到以下错误。最初该
C:位于 "printf"的神秘核心转储
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
swift - 位于 View 顶部的导航栏
说到 UINavigationBar 时我有点困惑。我以编程方式设置它，它的作用是将我的 viewController 向下推(因此在启动应用程序后看不到 Storyboard中看到的 View 底部
MySQL - GROUP_CONCAT 位于 WHERE |小于或大于值
我有以下查询，它可以满足我的要求，并显示从出生日期转换而来的人们的年龄。但我现在想通过说大于或小于这些年龄来缩小结果范围，但我不知道该怎么做。 SELECT u.`id` as `user_id`
java - 位于 ListView 行中的按钮总是在最后一行触发
我有一个 ListView (不是 recyclerView)，其中每一行都有一个按钮、几个 TextView 和一个 EditText。单击特定按钮(“editTremp”)后，我希望 EditTe
ios - 位于 cellAtIndexPath 中的查询
我的 cellAtIndexPath 中有一个查询。正如常见的那样，此查询从单元格行索引处的数组中获取对象。我想知道每次加载 tableView 时是否只有一个查询，还是将其算作每个 indexPat
css - 位于 float 元素旁边时的列表项剪辑
我目前正在探索 http://www.ecovivo.be/rubriek/food 上使用的模板中的错误. 问题:访问该链接时，您会注意到右侧有一个带有内容的大型 float 图像。现在一切正常。但
arrays - 数组和删除的地址(位于 :) IOS
我在 ViewController 之间通过引用传递特定模型的数组。如果我更改数组中特定元素的任何值，它会在所有 ViewController 中很好地反射(reflect)，但是当我从该数组中删除
html - 位于 svg 上方的元素不可点击
svg 包含更多元素，其中之一是下拉选择器。我遇到的问题是选择器只能在其顶部边缘被点击，而不能在选择器的其他任何地方被点击。选择器称为 yp-date-range-selector。在下一张图片中，
html - 位于 flex 容器中心的按钮太窄
我的元素使用 20 行 20 列的 css 网格布局(每个单元格占屏幕的 5%)。其中一个页面有一个按钮。最初该页面包含在网格第 5-8 列和网格第 6-9 行中，按钮本身没有问题，但我需要将其居中放
jquery - 位于 div 中心的图像未知高度宽度
我想使用 CSS Trick 使图像居中.但是如果图像大小是随机的(不固定的)怎么办。令人惊讶的是，我不想保持图像响应，我想在不改变其宽度或高度(实际像素)的情况下将图像置于中心。下面是我的代码:
python - NoReverseMatch 位于/产品/
我正在尝试在网址之间进行路由。产品是一个类: from django.db import models from django.urls import reverse # Create your mo
python - NoReverseMatch 位于/polls/
我正在通过查看 Django 教程来制作网站。我收到一个错误: NoReverseMatch at /polls/ Reverse for 'index' with no arguments not
python - TemplateDoesNotExist 位于/polls/
我一直在试用 Django 教程 Django Tutorial Page 3并遇到了这个错误 "TemplateDoesNotExist at /polls/ " . 我假设问题出在我的代码指向模板
ios - 位于 IB 中可见但在运行时中不可见的单独包中的资源
我有一个应用程序，其中大部分图像资源都存储在单独的资源包中(这样做是有正当理由的)。这个资源包与主应用程序包一起添加到项目中，当我在 Interface Builder 中设计我的 NIB 时，所有这
ios - KERN_INVALID_ADDRESS 位于 0x0000000000000000
我使用 Xcode 6.3.2 开发了一个 iPad 应用程序。我将我的应用程序提交到 App Store 进行审核，但由于崩溃而被拒绝。以下是来自 iTunes 的崩溃报告。 Incident Id
html - 位于 div 顶部的伪元素水平滚动条
我正在使用以下内容来显示水平滚动条: CSS: div { width: 300px; overflow-x: scroll; } div::-webkit-scrollbar {

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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