小编Him*_*ana的帖子

暗模式陷入路口

我一直在一个网站上工作,因此决定向其添加暗模式功能,我使用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

7
推荐指数
0
解决办法
175
查看次数