在 React 中创建滚动位置指标

Creating a scroll position indicator in React

本文关键字：位置 滚动 创建 React      更新时间：2023-09-26

我正在尝试在 React 中编写滚动指示器进度条。我让它与Jquery一起工作，但想知道如何使用纯Javascript来做到这一点。

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }
  handleScroll() {
    var winHeight = $(window).height(),
      docHeight = $(document).height(),
      value = $(window).scrollTop(),
      max, percent;
    max = docHeight - winHeight;
    percent = (value / max) * 100;
    this.props.updatePercent(percent);
  }

另外，我应该在纯Javascript中这样做吗？有人告诉我，Jquery 不应该在 React 中使用。

这是你唯一使用JQuery的地方吗？如果是这样，我建议放弃它，改用纯javascript。你可以用 JQuery 做的所有事情，你也可以用 React 和纯 JavaScript 做，这里不值得开销。

这是handleScroll函数的纯JavaScript版本。请注意，文档高度的计算是出了名的烦人，但我采用了这个问题的方法（它只是重现了 JQuery 的实现）。

handleScroll() {
   var winHeight = window.innerHeight;
   // Annoying to compute doc height due to browser inconsistency
   var body = document.body;
   var html = document.documentElement;
   var docHeight = Math.max( body.scrollHeight, body.offsetHeight, 
                   html.clientHeight, html.scrollHeight, html.offsetHeight );
   var value = document.body.scrollTop;
   ...
}

更新

如果你想在元素中获取滚动位置，你需要类似的东西

var el = document.getElementById('story_body');
var minPixel = el.offsetTop;
var maxPixel = minPixel + el.scrollHeight;
var value = document.body.scrollTop;
// respect bounds of element
var percent = (value - minPixel)/(maxPixel - minPixel);
percent = Math.min(1,Math.max(percent, 0))*100;

回答你的第二个问题：在这种特殊情况下，你可以坚持使用jQuery（尽管我更喜欢vanilla javascript版本）。

使用 react，将 jQuery 用于以下用途是完全可以的：

  • 从真实 DOM 中读取未知反应的信息（例如 DOM 中的组件高度或机箱中的滚动位置）
  • 阿贾克斯的东西

使用 React，你不应该将 jQuery 用于：

  • 直接操作 DOM：只通过 react 操作 DOM。（在 react 中使用 jQuery 操作 DOM 是大麻烦的保证）
  • 读取可以并且应该知道做出反应的 DOM 信息，例如输入字段的值。（事情并没有真正中断，但是如果你使用 jQuery 来规避 React 的严格设计准则，它会让你的 react 代码更难调试）
相关文章：