Uncaught TypeError： 'HTMLProgressElement'の 'value'プロパティを設定できませんでした。提供されたdouble値は非有限です

Question

既存のjqueryコンポーネント（読み込みの進行状況バー）をインストールしたいが動作しません。

HTML：：

<progress value="0"> 
<div class="progress-container"> 
    <span class="progress-bar"></span> 
</div> 
</progress> 

JS：

$(function() { 
    $(window).on("scroll resize", function() { 
     var o = $(window).scrollTop()/($(document).height() - $(window).height()); 
     $(".progress-bar").css({ 
      "width": (100 * o | 0) + "%" 
     }); 
     $('progress')[0].value = o; 
    }) 
}); 

Answer 1

編集：私は私を助けてください、jqueryのを知らないあなたは私にそのCSSを使用したページを示した後に[OK]をので、私は見ました実際の問題がそこにあったことは、CSSで。 sectionノードにheight: 100%;を設定すると、投稿した元のコードが機能します。

オリジナルの答え：0とき$(document).height() - $(window).height() 0を返します。結果によってscrollTopスプライト（）が0を返すとき

あなたが何かに0を分割している、と何かが最初のケースでNaNと第2ケースでInfinityです。このコードを試してみてください：

$(function() { 
    $(window).on("scroll resize", function() { 
     var top = $(window).scrollTop(); 
     var heightDiff = $(document).height() - $(window).height(); 
     var o = top == 0 ? 0 : (top/(heightDiff == 0 ? 1 : heightDiff)); 
     $(".progress-bar").css({ 
      "width": (100 * o) + "%" 
     }); 
     $('progress')[0].value = o; 
    }) 
});