element.scrollTop не работает в Firefox

Question

Я создаю компонент, который в основном определяет, когда пользователь остановил прокрутку. Затем он находит тег секции закрытия на странице и плавные свитки в верхней части раздела. У меня это 95% сделано и отлично работает на Chrome и Safari, однако я не могу на всю жизнь заставить его нормально работать в Firefox. Моя проблема заключается в том, что Firefox не может найти значение scrollTop тега body. Независимо от того, что всегда было сказано, значение равно 0 или 1. Когда я прочитал эту проблему, я вижу много исправлений, связанных с включением документа. перед телом, но это просто вызывает ошибки в моем скрипте. Когда я пытаюсь использовать другие методы, такие как pageOffsetY и jQuery, у меня все еще возникают проблемы с моим скриптом. Если у вас есть предложения по решению этой проблемы, это было бы здорово. Я также открыт для изменения моей функции прокрутки, чтобы разместить это исправление, которое я расскажу ниже. Однако единственное, что мне нужно, чтобы отменить функцию, если пользователь начинает прокрутку снова, и это единственный javascript, который я могу получить, чтобы работать, который не борется с пользователем при попытке прокрутки во время работы функции.

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 вместо document.body:

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