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更专注，所以我所有的正常修复都不能在这里完全翻译。

Answer 1

我觉得我错过了你的一部分问题。你不能简单地将50像素添加到+吗？

firstTextElement.offsetTop

Answer 2

听起来您有一个很好的设置来确定用户是向上还是向下滚动，因此您可以在方向更改时将this.state.hideForArticleNav设置为当前窗口偏移，而不是设置this.state.lastDirectionChangeOffset。然后你可以检查那个状态值，看它是+/- 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 }) 
  }     
}

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

2 个答案: