- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 css position: sticky 创建一个包含粘性列的表格。当它们“卡住”时,我想以不同的方式设置列的样式。我的第一个元素涉及在第二列部分滑过第一列或 .wdtscroll td:nth-child(1) 时设置样式。这是javascript
const stickyElm = document.querySelector('.wdtscroll td')
const observer = new IntersectionObserver(
([e]) => e.target.classList.toggle('isSticky', e.intersectionRatio < 1),
{threshold: [1]}
);
observer.observe(stickyElm)
这是 jsfiddle:https://jsfiddle.net/g421kjcx/
虽然它肯定不是完美的,但我通过将其左侧位置设置为 -1px 来实现这一点,因此一旦您开始水平滚动表格,它就会被设置样式。如您所见,这是有效的,但仅适用于顶部单元格。
当我在我的网站上使用此代码时,它不起作用并且我收到一条警告:“TypeError:IntersectionObserver.observe 的参数 1 不是对象。”
当我查找时,似乎 Object.observe 已过时。
我如何在不使用 Object.observe 的情况下使用此 javascript,以及我如何定位第一列中的所有 td。
额外的问题:当第二列或 .wdtscroll td:nth-child(2) 卡住时,我将如何设计它的样式,即使它永远不会滚动到视口(viewport)之外。
谢谢!
最佳答案
Here is the jsfiddle: https://jsfiddle.net/g421kjcx/
这是我对你的 fiddle 的回应:https://jsfiddle.net/5nfb2qdy/4/
我回答了您在这篇文章中提出的一系列问题:
As you can see this is working but only for the top cell. ...how can I "target" all td's in the first column.
1) 观察者的目标是单个元素(在本例中)。这意味着您不能依赖它来为多个元素设置样式。相反,这样做:
([e]) => {
let all_td = document.querySelectorAll('.wdtscroll td:first-child')
all_td.forEach(entry =>
entry.classList.toggle('isSticky', e.intersectionRatio < 1)
)
}
When I use this code on my website, it does not work and I get a warning stating: "TypeError: Argument 1 of IntersectionObserver.observe is not an object."
2) 这很可能是因为 JavaScript 在引用的元素出现在页面上之前就已经运行了。如果此代码块在 <head></head>
中页面的一部分,只需稍作修改即可使其正常工作:
window.onload = function(){
observer.observe(stickyElm)
}
通过将观察者激活包装在 onload
中,它不会在页面完成呈现之前运行。另一种选择是将所有这些 JavaScript 移动到页面末尾,就在您的 </body></html>
之前。
Bonus question: How would I style the second column or .wdtscroll td:nth-child(2) when it is stuck, even though it will never scroll past the viewport.
3) 也许像这样?
([e]) => {
let all_td = document.querySelectorAll('.wdtscroll td:nth-child(1)')
let all_2nd_td = document.querySelectorAll('.wdtscroll td:nth-child(2)')
all_td.forEach(entry =>
entry.classList.toggle('isSticky', e.intersectionRatio < 1)
)
all_2nd_td.forEach(entry =>
entry.classList.toggle('isSticky', e.intersectionRatio < 1)
)
}
同时将此添加到 CSS 的末尾:
.wdtscroll tr td:nth-child(2).isSticky {
background-color: pink;
}
4) 不是对您的任何问题的回应,但我注意到您的 CSS 通常存在一些问题。以下是我更改的内容:
CSS
/* added td to the selectors of the next 2 rules */
.wdtscroll tr:nth-child(even) td { background-color: #f2f2f2; }
.wdtscroll tr:hover td { background-color: #ddd; }
/* added tr to the selector list to override the background color set above */
.wdtscroll tr td.isSticky{
background-color: salmon;
}
5) 最后,批评用于对元素进行类分配的方法。您可能有充分的理由为每个 td
分配类属性每个 tr
.这也可以通过将样式应用于 td:nth-child(1)
的规则将类属性分配给表本身来更简单地实现。和 td:nth-child(2)
只有 2 个 CSS 规则。这将消除在 JavaScript 中循环遍历表格的每一行并利用 CSS 的特性来设置批量元素样式的需要。
CSS:
.wdtscroll.isSticky tr td:nth-child(1) {
background-color: salmon;
}
.wdtscroll.isSticky tr td:nth-child(2) {
background-color: pink;
}
JavaScript:
// get the sticky element
const stickyElm = document.querySelector('.wdtscroll td')
const tableElm = document.querySelector('.wdtscroll')
const observer = new IntersectionObserver(
([e]) => {
tableElm.classList.toggle('isSticky', e.intersectionRatio < 1)
},
{threshold: [1]}
);
window.onload = function(){
observer.observe(stickyElm)
}
对于一个漂亮、简洁、整洁的解决方案来说怎么样? :)最后的 fiddle :https://jsfiddle.net/5nfb2qdy/5/
关于javascript - IntersectionObserver.observe 不是对象,如何使用IntersectionObserver,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58758085/
电梯导航也被称为锚点导航,当点击锚点元素时,页面内相应标记的元素滚动到视口。而且页面内元素滚动时相应锚点也会高亮。电梯导航一般把锚点放在左右两侧,类似电梯一样。常见的电梯导航效果如下,比如一些官方文档
我正在使用IntersectionObserver polyfill在图 block 上延迟加载图像。问题是我有几千个图 block ,每个图 block 上都有一个需要延迟加载的图像。 以前,我使用
我有一个包含许多方形图像(相同宽度和高度)的页面,其中大小由 width:50% 控制。他们将延迟加载使用 IntersectionObserver 的 lozad.js ( https://www.
在单页应用程序中,元素经常被删除和替换。在从 DOM 中移除的元素上可能有一个 IntersectionObserver(或任何其他类型) 对于我从不关心的事件,因为它们是在目标上绑定(bind)和触
我如何将额外的参数传递给 IntersectionObserver?我正在尝试为 Vue 创建一个 lazyload 插件。它像这样工作正常,但我也希望能够调用提供的指令函数。 const lazyl
我创建了一个用户界面,当用户向下滚动页面时,会出现 4 个带有“淡入”效果的网格框,但是当我们向上滚动页面时,再次向下滚动页面时,动画再次出现,而准确地说,我不想让动画做多次,而只是在盒子出现一次时。
我想为具有以下属性的元素创建动画: 它在 时为元素设置动画它进入视口(viewport) 如果元素离开视口(viewport)然后再次进入它应该是再次动画 根据滚动方向/相交边(从顶部或底部),动画应
目标: 我想对一组在页面加载时相交的元素执行一个操作,并单独处理所有其他元素(当前未相交)。 问题: 每个观察者都有自己的回调,我无法同步获得一组结果。 可能的解决方案: 如果最初可以询问相交观察者元
我正在尝试构建我的 gatsby 项目,但由于 IntersectionObserver 未被识别,我无法构建。我在 InView 组件中使用了intersectionObserver: import
我有一个 div,我想在它滚动到视口(viewport)时更改颜色,我正在尝试使用新的 intersectionObserver 来实现这一点方法。我已经在配置回调中设置了我的参数,但我似乎无法让观察
我有以下方法: componentDidLoad() { this.image = this.element.shadowRoot.querySelector('.lazy-i
我正在使用 IntersectionObserver在元素进入视口(viewport)时向元素添加和删除类。 而不是说“当 X% 的元素可见时 - 添加此类”我想说“当 X% 的元素可见或当 X% 的
当目标元素距离交叉点根 100px 时,我想拦截一个交叉点 为了做到这一点,我将 rootMargin 设置为“100px 0px 100px 0px”。 在这个例子中,当目标元素的第一个像素(红色框
有什么方法可以强制更新/运行 IntersectionObserver实例?默认情况下,当视口(viewport)发生更改时,将执行回调。但是我正在寻找一种在其他事件发生时执行它的方法,比如元素的变化
设置rootMargin的代码如下所示。 let observerOptions = { root: null, rootMargin: "100px", threshold:
我正在尝试编写一个测试,当元素在视口(viewport)中时断言某些内容。 我正在使用 IntersectionObserver API,事实证明,对观察者的调用是在浏览器可以进行时完成的。 所以问题
我正在观察消息并使用消息时间戳来跟踪这些观察结果。这些观察有一个重要条件:如果页面上没有客户端事件(光标不移动,或者他没有输入任何内容),则跟踪时间戳不应更新。客户端经常收到新消息,但没有任何事件。这
我有一个 IntersectionObserver 观察一个 img,当根设置为 null(视口(viewport))时它工作得很好。但是,当我将根元素设置为另一个 img 元素时,观察者无法检测到两
试图理解 intersectionObserver API 中的一个怪癖。 如果观察到的元素部分出现在屏幕上但未达到选项中定义的阈值,我希望回调不会触发,但它确实。试图了解为什么或如何在页面加载时阻止
我正在尝试为无限滚动列表设置一个 IntersectionObserver。我想检查 IntersectionObserver 是否已到达列表的最后一项。 到目前为止,我的 IntersectionO
我是一名优秀的程序员,十分优秀!