Use `document.scrollingElement` for mobile scrolls

- Set `document.scrollingElement` as the scrolling element for scrolling to anchors when the app is mobile mode to enhance support in newer browsers. The CSS View Module spec considers `document.documentElement`/`<html>` to be the standard scrolling element and that is what appears to be used in the latest Firefox and Chrome. However, some older browsers and even the current Safari use `document.body` as the scrolling element which is why I suspect the original code used `document.body`. Since some browsers scroll on different elements, `document.scrollingElement` exists so the browser can tell us what to use for scrolling to anchors work for all modern browsers. Since `document.scrollingElement` is undefined in older browsers, `document.body` is available as fallback mobile scrolling element.
7 years ago · 3a446f1f9d
parent 2ec5018bff
commit 3a446f1f9d
1 changed files with 4 additions and 1 deletions
--- a/assets/javascripts/views/content/content.coffee
+++ b/assets/javascripts/views/content/content.coffee
@ -19,7 +19,10 @@ class app.views.Content extends app.View
    after:  'afterRoute'
  init: ->
-    @scrollEl = if app.isMobile() then document.body else @el
+    @scrollEl = if app.isMobile()
      (document.scrollingElement || document.body)
    else
      @el
    @scrollMap = {}
    @scrollStack = []