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

【问题标题】：React.js Scroll Threshold for Revealing Navigation用于显示导航的 React.js 滚动阈值
【发布时间】：2023-03-18 18:15:01
【问题描述】：

另一位开发人员使用 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，所以我所有的正常修复在这里都不能完全翻译。

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

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

window.scrollY >= firstTextElement.offsetTop + 50

【讨论】：

【解决方案2】：

听起来您有一个很好的设置来确定用户是向上还是向下滚动，因此当方向改变时，您可以将this.state.lastDirectionChangeOffset 设置为当前窗口偏移量，而不是设置this.state.hideForArticleNav。然后您可以检查该状态值是否为 +/- 50 像素。

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 }) 
  }     
}

【讨论】：