我试图通过使用offsetTop属性来检测元素何时出现在容器的边界之外,但该属性没有给出我预期的结果.有关上下文,请参阅this simplified JSFiddle.

根据MDNoffsetTop属性的定义:

HTMLElement.offsetTop只读属性返回当前元素的外边框相对于OffsetParent顶部内边框的距离,OffsetParent是位置最接近的祖先元素.

在我的JSFdle示例中,您可以看到#target元素的偏移量父级是#container,这是预期的,因为它是最近的定位祖先.然后,我预计当滚动#container时,target.offsetTop的值将发生变化,因为从#target#container顶部的距离--即它的偏移父对象--现在正在发生变化.然而,情况并非如此,因为当滚动容器时,target.offsetTop根本不会改变.(我确保示例中的文本已在滚动中更新)

我对这处房产的理解错了吗?或者我做了什么事情,导致它的工作方式与定义的不同?

推荐答案

当父级滚动时,子级的offsetTop将保持一致,但父级的scrollTop将更新,以反映父级垂直滚动的像素数.实现期望行为的一个简单方法是从父母的scrollTop中减go 子元素的offsetTop.

请以此更新的代码为例: https://jsfiddle.net/08Ltchb9/

Html相关问答推荐

使用tauri构建的Next.js应用程序不显示我的404页面

当表头包含特殊字符时,R Quarto发布的HTML表中不必要的大列宽

CSS自定义特性中的URL是否可以相对于定义的CSS文件?

如何在css中将包含多行文本的多个p-tag放在一起(并排)?

为什么这个高度为100%的页面会出现滚动条?

在 Select 前后更改选项卡的背景

用于删除页面页眉上的超链接的CSS

如何使用CSS创建文件夹选项卡的形状?

如何从elementor中的滑块中获取文本?

如何在css中旋转块时调整内容宽度、高度

静态DIV的标签,显示从窗体输入的值

如何使用 HTML 将对象数组发送到 Nodejs Express

是否有语义 HTML 可以澄清含义?

为什么溢出时overflow: auto框的底部有一个小间隙?

如何清除html输入中的文本

如何从 razor 页面打开 html 页面

在 jinja 模板内的 html 表中嵌套 For 循环

样式不适用于来自 tailwindcss 的网络

所有幻灯片上的 Quarto RevealJS 标题

表格布局:固定;文本溢出单元格时不起作用