element.scrollトップがFirefoxで動作しない

Question

私は基本的にユーザーがスクロールを停止したときに検出するコンポーネントを構築しています。次に、ページ上でセクションタグを閉じ、セクションの上端まで滑らかにスクロールします。私はそれが95％完了し、ChromeとSafariで完璧に動作しますが、私の人生はFirefox上で正しく動作するようにはできません。私の問題は、FirefoxがbodyタグのscrollTop値を見つけることができないということです。常にそれが0または1であると言いました。この問題を読んだときには、ドキュメントを含む多くの修正があります。体の前に、それは私のスクリプトでエラーを引き起こすだけです。私がpageOffsetYやjQueryのような他のメソッドを使用しようとすると、スクリプトに問題が発生します。あなたはこの問題を解決するための提案があればそれは素晴らしいでしょう。私はこの修正に対応するスムーズなスクロール機能を変更することにもオープンしています。これについては以下で説明します。しかし、唯一のことは、私は、ユーザーが再びスクロールを開始し、これは機能している間にスクロールしようとしたときに私はdoesntの戦いに働くことができる唯一のJavaScriptです1をキャンセルすることができる必要があります。代わりにdocument.bodyの

smooth_scroll_to(document.body, scrollPoint.y, 600); 


var smooth_scroll_to = function(element, target, duration) { 
    target = Math.round(target); 
    duration = Math.round(duration); 
    if (duration < 0) { 
     return Promise.reject("bad duration"); 
    } 
    if (duration === 0) { 
     element.scrollTop = target; 
     return Promise.resolve(); 
    } 

    var start_time = Date.now(); 
    var end_time = start_time + duration; 

    var start_top = element.scrollTop; 
    var distance = target - start_top; 

    // based on http://en.wikipedia.org/wiki/Smoothstep 
    var smooth_step = function(start, end, point) { 
     if(point <= start) { return 0; } 
     if(point >= end) { return 1; } 
     var x = (point - start)/(end - start); // interpolation 
     return x*x*(3 - 2*x); 
    } 

    return new Promise(function(resolve, reject) { 
     // This is to keep track of where the element's scrollTop is 
     // supposed to be, based on what we're doing 
     var previous_top = element.scrollTop; 

     // This is like a think function from a game loop 
     var scroll_frame = function() { 
      if(element.scrollTop != previous_top) { 
       reject("interrupted"); 
       return; 
      } 

      // set the scrollTop for this frame 
      var now = Date.now(); 
      var point = smooth_step(start_time, end_time, now); 
      var frameTop = Math.round(start_top + (distance * point)); 
      element.scrollTop = frameTop; 

      // check if we're done! 
      if(now >= end_time) { 
       resolve(); 
       return; 
      } 

      // If we were supposed to scroll but didn't, then we 
      // probably hit the limit, so consider it done; not 
      // interrupted. 
      if(element.scrollTop === previous_top 
       && element.scrollTop !== frameTop) { 
       resolve(); 
       return; 
      } 
      previous_top = element.scrollTop; 

      // schedule next frame for execution 
      setTimeout(scroll_frame, 0); 
     } 

     // boostrap the animation process 
     setTimeout(scroll_frame, 0); 
    }); 
} 

Answer 1

使用document.documentElement：

smooth_scroll_to(document.documentElement, scrollPoint.y, 600);