作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有 intersection observer object 它可以工作,但我希望它在某个元素超过或位于交点底部 100 像素时通知我。
使用默认配置,一旦元素正好在 View 中,它只会更改 .isIntersection 的值。但是当元素在视口(viewport)上方或下方 100 像素时,我想做一些事情。
这是我的代码:
var iObserver = new IntersectionObserver(function(element) {
console.log('elementi', element); // I want to trigger here when elementi is 100px or less of distance to the viewport.
});
var el;
for (var i = 0; i < elements.length; i++) {
el = elements[i];
console.log('eli', el);
iObserver.observe(el);
}
感谢用户的回答我使用了这个并且它有效:
var iObserver = new IntersectionObserver(function(entryEvent) {
//...
}, {'rootMargin': '100px 0px 100px 0px'});
最佳答案
您可以在传递给观察者的选项中定义 rootMargin
顶部和底部。
在演示中,将红色矩形悬停在距 .container
10px
的距离时,将调用观察者:
const options = {
root: document.querySelector('.container'),
rootMargin: '10px 0px 10px 0px',
};
let i = 0;
const iObserver = new IntersectionObserver((entries) => console.log(`intersection ${i++}`), options);
iObserver.observe(document.querySelector('.element'));
.container {
position: relative;
height: 20px;
background: lightblue;
}
.element {
position: absolute;
top: calc(100% + 30px);
height: 100px;
width: 100px;
background: red;
margin-bottom: 20px;
transition: top 5s;
}
.element:hover {
top: calc(100% - 30px);
}
.as-console-wrapper {
height: 50px;
}
<div class="container">
<div class="element">1</div>
</div>
关于javascript - 配置 IntersectionObserver 以根据 X 像素更改 *.isIntersecting 的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47329289/
如果我将 threshold 值配置为任何大于 0 的值,当目标离开视口(viewport)时,isIntersecting 永远不会返回 false。但是,如果我将默认阈值保留为 0,isInter
我有 intersection observer object 它可以工作,但我希望它在某个元素超过或位于交点底部 100 像素时通知我。 使用默认配置,一旦元素正好在 View 中,它只会更改 .i
我是一名优秀的程序员,十分优秀!