javascript - 滚动到特定 id ReactJS 时添加类

Question

我试图在窗口顶部滚动到特定 ID 时添加一个类，并在滚动回顶部时删除类。我是 ReactJs 的新手，不确定如何做到这一点。

window.onscroll = function() {scrollFunction()};

 scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myID").className = "test";
  } else {
    document.getElementById("myID").className = "";
  }
}

我如何在 React 中使用这样的东西？寻找一个简单的函数来处理这个

标签： javascriptreactjs

Answer 1

您可以使用 var getBoundingClientRect 并计算可视元素！

我已经创建了stackblitz链接来解决您的问题！如果您需要进一步的帮助评论

componentDidMount() {
    const getViewable = document.getElementById("start-editing");
    const that = this;
    window.addEventListener(
      "scroll",
      function(event) {
        if (that.isInViewport(getViewable)) {
          getViewable.classList.add("black");
          getViewable.classList.remove("gold");
        } else {
          getViewable.classList.add("gold");
          getViewable.classList.remove("black");
        }
      },
      false
    );
  }

  isInViewport = elem => {
    var bounding = elem.getBoundingClientRect();
    return (
      bounding.top >= 0 &&
      bounding.left >= 0 &&
      bounding.bottom <=
        (window.innerHeight || document.documentElement.clientHeight) &&
      bounding.right <=
        (window.innerWidth || document.documentElement.clientWidth)
    );
  };