我一直在一个网站上工作,因此决定向其添加暗模式功能,我使用darkmode.js库实现了该库,该库基于原理工作mix-blend-mode: difference。但是,当我使用IntersectionObserver向其中添加滚动动画并启用了暗模式时,应该显示的div变成白色,然后立即变成黑色。是的,看起来似乎很复杂,所以
这是我的代码
const targets = document.querySelectorAll('.animate');
const options = {
threshold: 0.7
}
const lazyLoad = target => {
const io = new IntersectionObserver((entries, observer) => {
console.log(entries)
entries.forEach(entry => {
console.log('');
if (entry.isIntersecting) {
const img = entry.target;
img.classList.add('fade');
observer.disconnect();
}
}, options)
}, options);
io.observe(target)
};
targets.forEach(lazyLoad);Run Code Online (Sandbox Code Playgroud)
.quotes-layout {
margin-top: 50px;
display: flex;
justify-content: center;
margin-left: 10%;
margin-right: 10%;
}
.quote {
flex: 1;
margin-right: 20px;
text-align: left;
background: #eee;
padding: 20px 20px;
}
.quote …Run Code Online (Sandbox Code Playgroud)javascript css difference mix-blend-mode intersection-observer