- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我如何将额外的参数传递给 IntersectionObserver?我正在尝试为 Vue 创建一个 lazyload 插件。它像这样工作正常,但我也希望能够调用提供的指令函数。
const lazyload = {
install(Vue) {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0) {
console.log('In viewport');
}
});
});
Vue.directive('lazy', {
inserted(element) {
observer.observe(element);
}
});
}
};
这意味着在插入的函数中,我会将 binding
设置为第二个参数。
inserted(element, binding)
我如何传递这个绑定(bind),以便我可以在我的 IntersectionObserver 回调中使用它?
最后它应该看起来像这样:
<div class="col-sm-6" v-lazy="fire">
最佳答案
如果您真的想将这些值作为额外参数传递,您可以使用 Function.bind
,但您必须为每个指令调用创建一个单独的 IntersectionObserver。
我会在这里推荐一个 WeakMap,并让回调检查映射以寻找正确的处理程序。像这样的东西:
const lazyload = {
install(Vue) {
const handlers = new WeakMap();
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
console.log('In viewport');
handlers.get(entry.target)();
}
});
});
Vue.directive('lazy', {
inserted(element, binding) {
handlers.set(element, binding.value);
observer.observe(element);
}
});
}
};
(我没有使用过 Vue,所以我不确定这是否会逐字工作)
顺便说一句,我将 entry.intersectionRatio > 0
更改为 entry.isIntersecting
。这可能是一个错误,但我在 Chrome 65 中看到,当滚动速度非常慢时,您可以获得 entry.intersectionRatio === 0 && entry.isIntersecting === true
: https://jsfiddle.net/3jgm0ch7/2/
关于javascript - 将额外参数传递给 IntersectionObserver?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48262903/
电梯导航也被称为锚点导航,当点击锚点元素时,页面内相应标记的元素滚动到视口。而且页面内元素滚动时相应锚点也会高亮。电梯导航一般把锚点放在左右两侧,类似电梯一样。常见的电梯导航效果如下,比如一些官方文档
我正在使用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
我是一名优秀的程序员,十分优秀!