个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在使用 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/
25
4
0
一段时间后，我阅读了有关 RxJava concat 的内容，并决定测试一下我的理解力。但是我遇到了一些我不太理解的行为。 问题是，当我连接两个可观察对象时，根据我将它们传递给 Observable.
我正在使用来自数据库服务的数据实现自动完成: @Injectable() export class SchoolService { constructor(private db: AngularF
我正在尝试使用 RxJS 创建一个可观察的对象，它可以执行如图所示的操作。 获取一个值并等待一段固定的时间才能获得 下一个。 下一个将是该周期内发出的最后一个值 等等，跳过其余部分。 如果等待时间间隔
我有一个可观察对象和另一个提供的可观察对象改变 key 。我想构建一个在之间切换的可观察对象基于该键的对象中的可观察值。 示例: // Choose randomly between "up" or
我使用 protobuffers 在我的前端和我的 Dart 服务器之间进行通信。 那些对象没有实现 Observable . 我的 Dart 聚合物对象看起来像: @CustomTag('user-
在 java swing 项目中，我有一个模型类，它保存某个 JPanel 的状态。我需要使这些数据可供 View 使用。我认为有两种选择。有一个扩展 Observable 的类并将模型作为实例变量。
我想找到一种方法来检测观察者是否已完成使用我使用 Rx.Observable.create 创建的自定义可观察对象，以便自定义可观察对象可以结束它并正确地进行一些清理。 因此，我创建了一些测试代码，如
我正在尝试查询数据库。迭代结果列表，并为每一项再执行一个请求。在 rxjs 构建结束时，我有 Observable[]> 。但我需要Observable 。如何做到这一点？ this.caseServ
我希望我的 api 上有一个方法返回 Observable> 但我希望该方法中的代码知道所有包含的 Observables 是否已完成，以便它可以关闭某些内容。最好的方法是什么？ 更明确地说，我希望完
我有两个方法返回 Observable> firstAPI.getFirstInfo("1", "2"); secondApi.getSecondInfo(resultFirstObservable,
我有一个 Observable返回单个 Cursor实例(Observable)。我正在尝试利用 ContentObservable.fromCursor获取 onNext 中每个游标的行回调。 我想
我有两种返回 Observable 的方法: Observable firstObservable(); Observable secondObservable(String value); 对于第一
我正在尝试创建一个将用户数据作为 Observable 的函数，并使用来自第一个 observable 的数据从查询中添加/合并数据，然后将所有这些数据作为一个 observable 返回，我可以这样
我有一个 spec-compliant ECMAScript Observable ，具体来自 wonka library .我正在尝试将这种类型的 observable 转换为 rxjs 6 obs
为了简化问题，我在这里使用了数字和字符串。代码: const numbers$:Observable = of([1,2,3]); const strings: string[] = ["a","b"
对于我的 Android 应用程序，我需要一个 Observable 来聚合来自 7 个不同搜索的结果并作为一个集合发出。 对于最终发射，我选择了 ListMultimap其中 Content是搜索结
我正在使用改造 2.0.0-beta2 并且调试构建工作正常，但我在使用 Proguard 发布构建时遇到以下错误。 这是更新后的 logcat 错误。 11-17 18:23:22.751 1627
observer.throw(err) 和 observer.error(err) 有什么区别？ 我正在使用 RxJS 版本“5.0.0-beta.12” var innerObservable =
我们有一种情况，对服务的方法调用返回一个 IObservable但我们的客户期望 IObservable .将 T1 转换为 T2 很简单。 Rx 中有什么允许这样做的吗？ (即链接观察者) 我知道我
我陷入了如何将以下可观察类型转换/转换为我的目标类型的困境: 我有可观察的类型: Observable>> 我想将其转换为: Observable> 所以当我订阅它时，它会发出 List不是Obser
我是一名优秀的程序员,十分优秀！