Question

我写了一个动画条形图的函数。当前，此操作是在页面加载时触发的，但是我只希望在到达该元素时触发它–否则用户将看不到动画。我想通过香草JavaScript实现这一目标，可以吗？

这是我的标记：

<div class="section">
  section
</div>
<div class="section">
  section
</div>
<div class="section">
  section
</div>
<div class="section">
  section
  <ul class="skills__list">
    <li class="skills__list-item">
      <div class="bar">
        <span>HTML</span>
        <div class="bar__inner" data-percent="90%"></div>
      </div>
    </li>
    <li class="skills__list-item">
      <div class="bar">
        <span>css</span>
        <div class="bar__inner" data-percent="80%"></div>
      </div>
    </li>
    <li class="skills__list-item">
      <div class="bar">
        <span>Javascript</span>
        <div class="bar__inner" data-percent="60%"></div>
      </div>
    </li>
    <li class="skills__list-item">
      <div class="bar">
        <span>UI design</span>
        <div class="bar__inner" data-percent="70%"></div>
      </div>
    </li>
    <li class="skills__list-item">
      <div class="bar">
        <span>sketch</span>
        <div class="bar__inner" data-percent="50%"></div>
      </div>
    </li>
    <li class="skills__list-item">
      <div class="bar">
        <span>Photoshop</span>
        <div class="bar__inner" data-percent="80%"></div>
      </div>
    </li>
    <li class="skills__list-item">
      <div class="bar">
        <span>Illustrator</span>
        <div class="bar__inner" data-percent="90%"></div>
      </div>
    </li>
  </ul>
</div>

这是Scss：

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.section {
  padding: 20px;
  font-size: 30px;
  font-family: sans-serif;
  text-transform: uppercase;
  height: 400px;
  &:nth-child(1){
    background-color: #ddd;
  }
  &:nth-child(2){
    background-color: #aaa;
  }
  &:nth-child(3){
    background-color: #bbb;
  }
  &:nth-child(4){
    background-color: #000;
  }
}

.skills__list-item {
  & + .skills__list-item {
    margin-top: 20px;
  }
}

// bar chart styles
.bar {
  position: relative;
  width: 100%;
  height: 28px;
  overflow: hidden;
  background-color: blue;

  span {
    position: absolute;
    z-index: 9;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 10px;
    color: #fff;
    background-color: red;
  }

  &__inner {
    display: flex;
    justify-content: flex-end;
    width: 0;
    height: 100%;
    background-color: green;
    transform-origin: 0 100%;
    transition: width 0.6s linear;

    &::after {
      content: attr(data-percent);
      align-self: center;
      padding-right: 20px;
      color: #fff;
    }
  }
}

这是JavaScript：

const bars = document.querySelectorAll('.bar__inner');


Array.from(bars).forEach((bar, index) => {
  setTimeout(() => {
    const eachBar = bar;
    eachBar.style.width = bar.dataset.percent;
  }, index * 400);
});

这是一个有效的示例Codepen。

Answer 1

您可以关注网站very helpful tip的Gomakethings.com。

它表明您可以使用 getBoundingClientRect() 方法来实现您的目标：

// Get the an HTML element
var element = document.querySelector('<a selector>');

// Get its bounding client rectangle
var bounding = element.getBoundingClientRect();

使用它来构建一个函数，以通过检索边界框来检查元素是否在视口客户端中（好吧，代码可以改进，这只是一个演示）：

function isInViewPort(element) {
    // Get the bounding client rectangle position in the viewport
    var bounding = element.getBoundingClientRect();

    // Checking part. Here the code checks if it's *fully* visible
    // Edit this part if you just want a partial visibility
    if (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth) &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)
    ) {
        console.log('In the viewport! :)');
        return true;
    } else {
        console.log('Not in the viewport. :(');
        return false;
    }
}

最后，在 scroll 事件上添加一个事件监听器，该事件将调用上述函数：

window.addEventListener('scroll', function (event) {
    if (isInViewport(theElementToWatch)) {
      // update the element display
    }
}, false);

根据浏览器兼容性displayed by the MDN page，Chrome和Firefox（> = 3.5）完全支持 getBoundingClientRect() 。多数浏览器完全支持此处提供的解决方案（某些移动版本不知道）。

根据Can I use...网站提供的版本，至少从给定版本开始，移动浏览器（Chrome，Firefox等）完全支持该方法。

最后，您可以记住一个实验性的解决方案，该解决方案旨在取代方法 getBoundingClientRect() （路口观察者API ）的使用（请参见汤姆（Tom M）的答案。 The MDN related page解释了原因：

过去实施交叉检测涉及事件处理程序，并循环调用Element.getBoundingClientRect()之类的调用方法来为受影响的每个元素建立所需的信息。由于所有这些代码都在主线程上运行，因此即使其中一个也会导致性能问题。当网站加载了这些测试时，事情可能会变得很丑陋。

Answer 2

您可以为此使用IntersectionObserver API。

const observer = new IntersectionObserver((entries) => { 
    entries.forEach((entry) => {
        console.log(entry.target);
        // your callback here
    })
}); 

observer.observe(document.querySelector('.skills__list-item'));

请注意Browser support，例如IE，Safari和Opera Mini不支持它。

如果要支持IE7 +，则可以使用the polyfill provided by the W3C。

资源

当用户将元素滚动到视口中时触发函数– Vanilla JavaScript

2 个答案: