<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <h1>scrollingElement</h1>

    <p>The iframe below is in no-quirks mode. Per the <a href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface">CSSOM View Module</a>, one has to use the root element (i.e. <code>document.documentElement</code>) in order to scroll its view. However, the behaviors of browsers have historically been inconsistent. When available, the new <a href="https://drafts.csswg.org/cssom-view/#dom-document-scrollingelement">document.scrollingElement</a> property gives you the DOM element to use in your browser without having to go with browser sniffing or similar.</p>

    <p><iframe style="width: 300px; height: 50px;"></iframe></p>
    <p id="output"></p>

    <script>
        var frame = document.querySelector("iframe");

        frame.onload = function() {
            var frameWindow = frame.contentWindow;
            var output = document.getElementById("output");
            output.innerText += "The value of document.scrollingElement in your browser is ";
            if (!frameWindow.document.scrollingElement)
                output.innerText += " undefined";
            else if (frameWindow.document.scrollingElement === frameWindow.document.documentElement)
                output.innerText += " document.documentElement";
            else if (frameWindow.document.scrollingElement === frameWindow.document.body)
                output.innerText += " document.body";
            else
                output.innerText += " ???";
            output.innerText += "\n\n";

            output.innerText += "In order to scroll the iframe in your browser, the scroll* properties can be used on ";
            frameWindow.document.documentElement.scrollLeft = 50;
            if (frameWindow.document.documentElement.scrollLeft === 50)
                output.innerText += " document.documentElement"
            else {
                frameWindow.document.body.scrollLeft = 25;
                if (frameWindow.document.body.scrollLeft === 25)
                    output.innerText += " document.body"
                else
                    output.innerText += " ???";
            }
        }

        frame.srcdoc = "<!DOCTYPE html><div style='width: 600px; height: 1px;'>"
    </script>
  </body>
</html>