用于显示导航的React.js滚动阈值

Question

另一个开发人员使用React.js编写了这段代码，以切换名为ArticleNav的导航元素的外观。 向下滚动时会显示自身，而向上滚动时会隐藏自身。

onScroll: function () {
  var mainColumn = document.getElementsByClassName('main-column')[0];
  var firstTextElement = mainColumn.querySelector('.dek');
  if (!firstTextElement) {
    firstTextElement = mainColumn.querySelector('.body-text');
  }

  if (window.scrollY >= firstTextElement.offsetTop) {
    if (!this.state.hideForArticleNav) {
      this.setState({hideForArticleNav: true});
    }
  } else {
    if (this.state.hideForArticleNav) {
      this.setState({hideForArticleNav: false});
    }
  }
}

效果很好，但是使用if (window.scrollY >= firstTextElement.offsetTop)会使此跳转来回太快，我想创建一个50px的阈值来确认用户确实在滚动相反的方向。

你们对如何解决这个问题有什么建议吗？ 我比React更注重jQuery，因此我的所有常规修补程序在此处均未完全翻译。

Answer 1

我觉得我想念你的部分问题。 您不能简单地将50 px添加到firstTextElement.offsetTop吗？

window.scrollY >= firstTextElement.offsetTop + 50

Answer 2

听起来您的设置不错，可以确定用户是向上滚动还是向下滚动，因此可以将this.state.lastDirectionChangeOffset设置为当前方向，而不是设置this.state.hideForArticleNav来代替当前窗口的偏移量。 然后，您可以对照该状态值检查其是否为+/- 50px。

onScroll: function () {
  var mainColumn = document.getElementsByClassName('main-column')[0];
  var firstTextElement = mainColumn.querySelector('.dek');
  if (!firstTextElement) {
    firstTextElement = mainColumn.querySelector('.body-text');
  }

  if (window.scrollY >= firstTextElement.offsetTop) {
    if (!this.state.hideForArticleNav) {
      this.setState({ lastDirectionChangeOffset: window.scrollY });
    }
  } else {
    if (this.state.hideForArticleNav) {
      this.setState({ lastDirectionChangeOffset: window.scrollY });
    }
  }

  if (window.scrollY > this.state.lastDirectionChangeOffset + 50) {
    this.setState({ hideForArticleNav: true })
  } else if (window.scrollY < this.state.lastDirectionChangeOffset - 50) {
    this.setState({ hideForArticleNav: false }) 
  }     
}