javascript - Creating a scroll position indicator in React - Stack Overflow

admin管理员组

文章数量:1201790

I'm trying to code a scroll indicator progress bar in React. I have it working with Jquery but would like to know how to do it with pure 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);
  }

Also, should I bother doing this in pure Javascript? I've been told that Jquery should not be used used in React.

I'm trying to code a scroll indicator progress bar in React. I have it working with Jquery but would like to know how to do it with pure 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);
  }

Also, should I bother doing this in pure Javascript? I've been told that Jquery should not be used used in React.

• javascript
• dom
• reactjs

Share Improve this question Follow asked Apr 26, 2016 at 18:15 domi91cdomi91c 2,05344 gold badges2424 silver badges3939 bronze badges 3

• Can you please post a jsfiddle or codesandbox with the working code. I'm not sure where I'm wrong, but this code and the changes suggested by others are not working for me – Pavan Commented Feb 16, 2020 at 11:27
• If you post an example, myself or somewhere here can try and help you. This was 4 years ago and I don't have the code available. – domi91c Commented Feb 16, 2020 at 21:28
• I found similar program on web. I can use that. Thank you though. – Pavan Commented Feb 18, 2020 at 15:52

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 14

Is this the only place you used JQuery? If so, I'd recommend ditching it for pure javascript. Everything you can do with JQuery you can also do with React and pure JavaScript, and it's not worth the overhead here.

Here's a pure JavaScript version of your handleScroll function. Note that document height is notoriously annoying to compute, but I've taken the approach of this question (which just reproduces JQuery's implementation).

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;
   ...
}

Update

If you want to get the scroll position within an element, you'll need something like

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;

To answer your second question: In this particular case, you could just stick to jQuery (although I prefer the vanilla javascript version).

With react, it is perfectly OK to use jQuery for:

• reading info from the real DOM, which are unknown to react (such as component height in the DOM, or scroll position in your case)
• ajax stuff

With React, you should NOT use jQuery for:

• Manipulating the DOM directly: only manipulate the DOM through react. (manipulating DOM with jQuery in react is a guarantee for big trouble)
• Reading DOM info that can and should be known to react, such as value of an input field. (things do not really break, but it makes your react code harder to debug if you use jQuery to circumvent react's strict design guidelines)

本文标签： javascriptCreating a scroll position indicator in ReactStack Overflow