如何获取元素相对于浏览器视口的顶部位置?

2023-12-03

我想获取元素相对于浏览器视口(显示页面的视口,而不是整个页面)的位置。这如何在 JavaScript 中完成?

非常感谢


现有的答案现在已经过时了。当地人getBoundingClientRect()方法已经存在很长一段时间了,并且完全符合问题的要求。另外,所有浏览器都支持它(似乎包括 IE 5!)

From MDN page:

返回的值是一个 TextRectangle 对象,其中包含描述边框的只读 left、top、right 和bottom 属性,以像素为单位,左上角为相对于视口的左上角.

你像这样使用它:

var viewportOffset = el.getBoundingClientRect();
// these are relative to the viewport, i.e. the window
var top = viewportOffset.top;
var left = viewportOffset.left;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何获取元素相对于浏览器视口的顶部位置? 的相关文章

随机推荐

  • 为什么Volley DiskBasedCache拼接时不直接获取缓存文件名

    Creates a pseudo unique filename for the specified cache key param key The key to generate a file name for return A pseu
  • SpelEvaluationException 找不到方法

    当我尝试使用 SpEL 将 User 传递给服务方法时 我面临下一个问题 evaluate expression commonService userTest user result flowScope user 春天抛出了以下异常 org
  • 多个 HTTP 授权标头?

    是否可以在 HTTP 消息中包含多个授权标头 具体来说 我想包括一种承载令牌类型 传递 OAuth 访问令牌 和一种基本类型 传递 base64 编码的用户名 密码 GET presence alice HTTP 1 1 Host serv
  • Python Flask Web 应用程序导航无需刷新页面

    我想开发一个像Google Contacts一样的Flask导航栏 当我单击每个导航按钮 如图所示的绿色框 时 我想在红色框内渲染特定的 HTML 页面 如图所示 而不刷新页面 我已经尝试过使用 扩展 layout html 正如 Klau
  • 通过文本框在 sql server 2005 中存储数据时出现错误

    我通过文本框和按钮在 SQL Server 2005 中存储数据 大约 1500 个字 我正在使用这段代码 protected void Button1 Click object sender EventArgs e conn Open S
  • 碰撞检测实施

    我有一个碰撞检测类 它通过查找中心之间的距离以及该距离是否足够小而足以发生碰撞来工作 请参阅碰撞检测错误 我的问题是试图让它真正发挥作用 椭圆形会发生碰撞 如果有必要 我会解释更多 谢谢 最好的方法是在图像重叠时实现每像素碰撞检测 您可以在
  • 字符串比较:与 PHP 中 JavaScript 的 localeCompare 相同吗?

    有没有办法让 PHP 中的字符串比较函数与 JavaScript 的相同string localeCompare 我的目标是制作一个可以应用于 PHP 和 JS 中的简单对象的哈希器 属性排序可以根据这个问题来解决 按属性值对 JavaSc
  • 如何使用 php 替换 CSV 文件中一行中的 1 个值?

    这是我非常简单和基本的帐户系统 只是一个学校项目 我希望用户能够更改他们的密码 但我不确定如何仅替换一行中的密码值 保持所有其他值相同 CSV 文件 ID Username Email DateJoined Password UserSco
  • Spring - 动态创建JMSTemplates

    我正在使用 Spring boot 并且我想动态创建多个 JMS 模板 因为我想连接到不同的 JMS 实例 我知道使用注释 将 ConnectionFactory 链接到 JMSTemplate 的标准方法 我希望每个不同的 JMS 实例都
  • 从数据库删除后无法更新 showModalBottomSheet 内的 ListView

    我有一个 ModalBottomSheet 里面有一个 ListView ListView 连接到 sqlite 数据库 所有创建 读取和删除方法都工作正常 但是当我删除一个项目时 我收到批准操作的 toast 消息 但我的视图没有更新 当
  • 如何在 MATLAB 中对离散 2D 曲面进行积分?

    我有一个函数z f x y where z是该点的值 x y 我该如何整合z超过x yMATLAB 中的平面 通过上面的函数 我实际上是指我有类似于哈希表的东西 也就是说 给定一个 x y 对 我可以查表找到对应的z value 如果这些点
  • 命名超类“Message”时的 Objective-C-Runtime 错误

    我有以下类层次结构 interface Message NSObject end implementation Message void dealloc I won t be called super dealloc end interfa
  • 如何通过panoid在谷歌街景中获取原始全景图像?

    我已经获得了通过 panoid 获取全景图像的参考 但它只给了我缩略图 但我想要直接从街景获取原始全景图像 下面给出了我所得到的链接 请帮我获取原始全景图像而不是缩略图 虽然没有官方API可以下载完整的全景图 您可以使用许多工具 视窗工具
  • 如何在地图上添加随机标记但避开大海?

    Google Ajax API 游乐场 http code google com apis ajax playground exp maps map markers 提供了一个向任何地图添加随机标记的好例子 function initial
  • C# 图像拼接

    我想要的是 拍摄 3 个图像 第一个图像保持原始大小 仅使用第一个图像大小的 1 2 从左侧开始 将另一个图像连接到它的底部 然后拍摄第三张图像并将其放在我整天都在看的第一张图像的右下半部分 有人有想法或想法吗 如果忽略纵横比 Image
  • 如何在 Alluvial/Sankey 图(在 R ggalluvial 上)的流量项上添加值标签?

    我希望在 R 上标记冲积 桑基图的 流量 部分 层 列 可以很容易地被标记 但连接它们的流却不能 我所有阅读文档和实验的尝试都没有成功 在下面的示例中 freq 预计会标记在流量连接部分上 library ggplot2 library g
  • 如何避免 jimp 阻塞 Node.js 代码

    我正在使用 Jimp 来处理一些照片 我有一个包含照片的数组 像这样 var images pic 1 jpg pic 2 jpg pic 3 jpg pic 4 jpg 这是操纵它们的代码 images forEach function
  • 从子文件夹中选取根文件夹的图像

    Let s say following is the directory structure of my website Now in index html我可以简单地参考如下图像 img src images logo png 但我想引用
  • 如何在elasticsearch中索引时进行映射

    我在用ElasticSearch在我索引数据的网站中MongoDB def postToEs self put data to the elasticsearch es Elasticsearch cursor self getMongoD
  • 如何获取元素相对于浏览器视口的顶部位置?

    我想获取元素相对于浏览器视口 显示页面的视口 而不是整个页面 的位置 这如何在 JavaScript 中完成 非常感谢 现有的答案现在已经过时了 当地人getBoundingClientRect 方法已经存在很长一段时间了 并且完全符合问题