小编Gio*_*nni的帖子

document.querySelectorAll('.classname')React 中的等价物是什么？我知道我应该使用 Refs，但是我如何观察多个 RefsonScroll呢？

我通常使用类似下面这样的函数来检查页面中多个元素的视口位置，并在每个元素进入视口时触发不同的css动画：

HTML

<ul>
  <li data-position="below-viewport"></li>
  <li data-position="below-viewport"></li>
  <li data-position="below-viewport"></li>
  <li data-position="below-viewport"></li>
</ul>

Javascript

getPosition: function (element) {
  const rect = element.getBoundingClientRect();

  if ((rect.top > -1) && (rect.top < (window.innerHeight * 0.75))) {
    element.setAttribute('data-js-position','in-viewport');
  } else if ((rect.top > 0) && (rect.top < window.innerHeight)) {
    element.setAttribute('data-js-position','entering-viewport');
  } else if (rect.top > window.innerHeight) {
    element.setAttribute('data-js-position','below-viewport');
  } else if (rect.bottom < 0) {
    element.setAttribute('data-js-position','above-viewport');
  }
}

window.addEventListener('scroll', function() {
  [].forEach.call(document.querySelectorAll('[data-js-position]'), el => {
    positionChecker.getPosition(el);
  })
}); …