element.scrollTop funktioniert nicht in Firefox

Question

Ich baue eine Komponente, die grundsätzlich erkennt, wenn der Benutzer nicht mehr gescrollt hat. Dann findet es das Closed-Section-Tag auf der Seite und glättet das Scrollen zum Anfang des Abschnitts. Ich habe es zu 95% fertig und arbeite perfekt auf Chrome und Safari, aber ich kann nicht für das Leben von mir es richtig auf Firefox funktionieren. Mein Problem ist, dass Firefox den ScrollTop-Wert des Body-Tags nicht finden kann. Egal, was es immer gesagt hat, der Wert ist 0 oder 1. Wenn ich zu diesem Thema nachlese, sehe ich viele Korrekturen, die das Einschließen von Dokumenten beinhalten. vor dem Körper, aber das verursacht nur Fehler in meinem Skript. Wenn ich versuche, andere Methoden wie pageOffsetY und jQuery zu verwenden, bekomme ich immer noch Probleme mit meinem Skript. Wenn Sie Vorschläge zur Lösung dieses Problems haben, wäre das großartig. Ich bin auch offen für die Änderung meiner reibungslosen Scroll-Funktion, um diesen Fix zu übernehmen, den ich unten bereitstellen werde. Die einzige Sache ist, ich muss in der Lage sein, die Funktion abzubrechen, wenn der Benutzer wieder scrollt und das ist das einzige Javascript, das ich zur Arbeit bekommen kann, das den Benutzer nicht kämpft, wenn der Versuch, während der Funktion zu scrollen scrollt.

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

Verwenden document.documentElement statt document.body:

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