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でこれを行う必要がありますか？私はJqueryをReactで使うべきではないと言われてきました。

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

更新

あなたは要素内のスクロール位置を取得したい場合は、あなたは2番目の質問に答えるために

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に固執することができます（私はバニラのjavascriptバージョンを好みます）。 （例えばDOMにおけるコンポーネントの高さとして、またはあなたのケース内の位置をスクロール）反応させるのに知られていない本当のDOMから情報を読み込む

• ：

  と反応して、ためにjQueryを使用することは完全にOKです

• AJAXのもの

リアクトでは、あなたがのためのjQueryを使用しないでください：

• の操作DOMは直接：反応によってDOMを操作するだけです。 （反応の中でjQueryを使ってDOMを操作することは、大きな問題を保証するものです）
• 入力フィールドの値など、反応することがわかっているはずのDOM情報を読み込みます。 （実際には問題はありませんが、jQueryを使用して反応の厳しい設計ガイドラインを回避すると、反応コードをデバッグするのが難しくなります）