48 lines
2.3 KiB
HTML
48 lines
2.3 KiB
HTML
<!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>
|