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

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版本.请注意,计算文档高度是非常烦人的,但我采用了这个问题的方法(它只是重现了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版本).

有了反应,使用jQuery完全可以:

• 从真实的DOM中读取信息,这些信息是未知的(例如DOM中的组件高度,或者您的情况下的滚动位置)
• ajax的东西

使用React,您不应该使用jQuery:

• 直接操作DOM:只通过反应来操纵DOM.(用反应中的jQuery操作DOM是大麻烦的保证)
• 读取可以并且应该知道反应的DOM信息,例如输入字段的值.(事情并没有真正破坏,但是如果你使用jQuery来规避反应的严格设计准则,它会让你的反应代码更难调试)