滚动到视图中时启动影片-编程知识-白鹭情

我有 2 个<hr>影片元素，它们彼此靠近。我希望影片在<hr>元素位于视口中时发生，而不是在页面加载时立即发生。我已经包含了我的 JavaScript 代码，但是这段代码不起作用；不确定我是否使用了正确的事件。

'use strict';

const linebreak = document.querySelector('#hero--one');
const symbolContainer = document.querySelector('.header__container-symbol')

linebreak.addEventListener('scroll', function(e) {
  e.preventDefault();

  const containerCoords = symbolContainer.getBoundingClientRect();

  symbolContainer.scrollIntoView({
    behavior: 'smooth'
  });
  linebreak.classList.remove('hidden');


})

/* Lines and Diamond above title */

.header__container-symbol {
  display: flex;
  justify-content: center;
  align-content: center;
  background-color: rgba(25, 25, 25, 1);
}

.span-D {
  align-self: center;
}

.hr-symbol {
  width: 60rem;
  display: inline-block;
  height: 0.3rem;
  background-color: #eee;
}

#hero--one {
  margin-right: 3px;
  animation: moveInLeftHr;
  animation-duration: 2s;
}

#symbol {
  font-size: 3rem;
}

#hero--two {
  margin-left: 3px;
  animation: moveInRightHr;
  animation-duration: 2s;
}

#symbol {
  color: #eee;
  margin-right: 2rem;
  margin-left: 2rem;
}

.hidden {
  display: none;
}


/* End Diamon and Lines above title */


/* KeyFrames Animations */

@keyframes moveInLeftHr {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes moveInRightHr {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

<div class="header__container-symbol">
  <span class="span-D"><hr  class="hidden hr-symbol" id="hero--one"/></span>
  <span id="symbol"> &#11033; </span>
  <span class="span-D"><hr class="hidden hr-symbol" id="hero--two"/></span>
</div>

uj5u.com热心网友回复：

您可以使用Intersection Observer API来检测元素何时与视口相交。

该threshold选项设定为1，这意味着它将检查元素何时完全在视口内。

div在 html 的顶部插入了一个测验来演示该行为。

'use strict';

const linebreak1 = document.querySelector('#hero--one');
const linebreak2 = document.querySelector('#hero--two');
const symbolContainer = document.querySelector('.header__container-symbol')

const observer = new IntersectionObserver((entries, observer) => {
  if (!entries[0].isIntersecting) return;
  linebreak1.classList.remove('hidden');
  linebreak2.classList.remove('hidden');
}, { threshold: 1 });

observer.observe(symbolContainer);

/* Lines and Diamond above title */

.header__container-symbol {
  display: flex;
  justify-content: center;
  align-content: center;
  background-color: rgba(25, 25, 25, 1);
}

.span-D {
  align-self: center;
}

.hr-symbol {
  width: 60rem;
  display: inline-block;
  height: 0.3rem;
  background-color: #eee;
}

#hero--one {
  margin-right: 3px;
  animation: moveInLeftHr;
  animation-duration: 2s;
}

#symbol {
  font-size: 3rem;
}

#hero--two {
  margin-left: 3px;
  animation: moveInRightHr;
  animation-duration: 2s;
}

#symbol {
  color: #eee;
  margin-right: 2rem;
  margin-left: 2rem;
}

.hidden {
  display: none;
}


/* End Diamon and Lines above title */


/* KeyFrames Animations */

@keyframes moveInLeftHr {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes moveInRightHr {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

<div style="height: 500px;"></div>

<div class="header__container-symbol">
  <span class="span-D"><hr  class="hidden hr-symbol" id="hero--one"/></span>
  <span id="symbol"> &#11033; </span>
  <span class="span-D"><hr class="hidden hr-symbol" id="hero--two"/></span>
</div>