Question

我试图在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中打扰这个吗？我被告知不应该在React中使用Jquery。

Answer 1

这是你使用JQuery的唯一地方吗？如果是这样，我建议抛弃纯粹的javascript。你可以用JQuery做的一切，你也可以用React和纯JavaScript做，而且这里的开销不值得。

这是handleScroll函数的纯JavaScript版本。请注意，计算文档高度非常令人讨厌，但我采用了this question的方法（它只是重现了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;

Answer 2

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

使用react，使用jQuery完全可以：

从真实的DOM中读取信息，这些信息无法做出反应（例如DOM中的组件高度，或者您的情况下的滚动位置）
ajax stuff

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

直接操作DOM：仅通过反应操纵DOM。（用反应中的jQuery操作DOM是一个很大麻烦的保证）
读取可以且应该知道反应的DOM信息，例如输入字段的值。（事情并没有真正破坏，但是如果你使用jQuery来规避反应的严格设计指南，它会使你的反应代码更难调试）

在React中创建滚动位置指示器

2 个答案: