JavaScript Feature Reference: scrollIntoView() Method Web Browser Support Test

Last reviewed/updated: 08 May 2018 | Published: 20 Oct 2016 | Status: Active
Web browser support: Internet Explorer 10+, Edge 12+, Firefox 6+, Chrome 30+, Opera 17+

1. Introduction

In this web page there are two web browser JavaScript feature support tests; 1.) a feature implementation test, and 2.) a feature capability test. The implementation test is run automatically. The capability test is run manually.

The implementation test determines if the web browser recognizes the JavaScript scrollIntoView() method. The implementation test is a simple test for the presence of web browser support, and a definitive test for the absence of web browser support. If the web browser does not recognize the JavaScript scrollIntoView() method, the implementation test reports: Fail (no support): The web browser does not recognize the JavaScript scrollIntoView() method. The web browser does not support the JavaScript scrollIntoView() method. If the web browser recognizes the JavaScript scrollIntoView() method, the implementation test reports: Pass (at least partial/possibly full support): The web browser recognizes the JavaScript scrollIntoView() method. The web browser at least partially/possibly fully supports the JavaScript scrollIntoView() method. Positive determination of full web browser support is beyond the scope of this test.

The capability test determines if the web browser's implementation of the JavaScript scrollIntoView() method includes support for at least one scrollIntoView() method capability. The capability test is a more definitive, albeit not an all inclusive, test for the presence of web browser support. Unlike the implementation test, the capability test is run manually and does not automatically generate a web browser support test result.

The web browser support implementation test source code is shown in Section 2.1.1. The web browser support implementation test source code is run in Section 2.1.2, which shows the web browser support implementation test result. The web browser support capability test source code is shown in Section 2.2.1. The web browser support capability test source code is manually run in Section 2.2.2.

1.1. scrollIntoView() Method Web Browser Support

  • Pass (at least partial/possibly full support): IE6+, ED12+, FF1.5+, SF3.1+, CH2+, OP9+.
  • Pass/Fail (partial support): OP8 - 8.54.

1.2. Abbreviations

  • IE = Internet Explorer.
  • ED = Edge = EdgeHTML rendering engine (ED12+) and/or Edge browser (ED20+).
  • FF = Firefox.
  • SF = Safari.
  • CH = Chrome.
  • OP = Opera.

2. scrollIntoView() Method Web Browser Support Tests

2.1. Web Browser Support Implementation Test

2.1.1. Web Browser Support Implementation Test Source Code

<p id='testId'></p>

<script>
var element = document.getElementById("testId");
if (element.scrollIntoView){
 document.write("<p><b>Pass</b> (at least partial/possibly full support): The web browser recognizes the JavaScript <code>scrollIntoView()</code> method. The web browser at least partially/possibly fully supports the JavaScript <code>scrollIntoView()</code> method. Positive determination of full web browser support is beyond the scope of this test.</p>");
} else {
 document.write("<p><b>Fail</b> (no support): The web browser does not recognize the JavaScript <code>scrollIntoView()</code> method. The web browser does not support the JavaScript <code>scrollIntoView()</code> method.</p>");
}
</script>

2.1.2. Web Browser Support Implementation Test Result

2.2. Web Browser Support Capability Test

2.2.1. Web Browser Support Capability Test Source Code

<p>To manually run the web browser support capability test, click the buttons below:</p>

<ul>
 <li>When click the <kbd>Test scrollIntoView() Support</kbd> button, if the web browser supports the JavaScript <code>scrollIntoView()</code> method, the <a href='#testScrollIntoViewTargetId'>target element text (below)</a> is scrolled to the top of the viewport: <button type='button' id='testNoArgumentId' class='btn-sm'>Test scrollIntoView() Support</button>.</li>
 <li>When click the <kbd>Test scrollIntoView(true) Support</kbd> button, if the web browser supports the JavaScript <code>scrollIntoView(true)</code> method, the target element text is scrolled to the top of the viewport: <button type='button' id='testTrueArgumentId' class='btn-sm'>Test scrollIntoView(true) Support</button>.</li>
 <li>When click the <kbd>Test scrollIntoView(false) Support</kbd> button, if the web browser supports the JavaScript <code>scrollIntoView(false)</code> method, the target element text is scrolled to the bottom of the viewport: <button type='button' id='testFalseArgumentId' class='btn-sm'>Test scrollIntoView(false) Support</button>.</li>
 <li>When click any of the buttons above, if the web browser does not support the tested JavaScript <kbd>scrollIntoView() method capability, nothing happens and the target element text is not scrolled into the viewport.</li>
</ul>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<p id='testScrollIntoViewTargetId'>target element text</p>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<script>
var elementNoArgument = document.getElementById("testNoArgumentId");
var elementTrueArgument = document.getElementById("testTrueArgumentId");
var elementFalseArgument = document.getElementById("testFalseArgumentId");
var elementScrollIntoViewTarget = document.getElementById("testScrollIntoViewTargetId");
elementNoArgument.onclick = function(){
 elementScrollIntoViewTarget.scrollIntoView();
}
elementTrueArgument.onclick = function(){
 elementScrollIntoViewTarget.scrollIntoView(true);
}
elementFalseArgument.onclick = function(){
 elementScrollIntoViewTarget.scrollIntoView(false);
}
</script>

2.2.2. Manually Run The Web Browser Support Capability Test

To manually run the web browser support capability test, click the buttons below:

  • When click the Test scrollIntoView() Support button, if the web browser supports the JavaScript scrollIntoView() method, the target element text (below) is scrolled to the top of the viewport: .
  • When click the Test scrollIntoView(true) Support button, if the web browser supports the JavaScript scrollIntoView(true) method, the target element text is scrolled to the top of the viewport: .
  • When click the Test scrollIntoView(false) Support button, if the web browser supports the JavaScript scrollIntoView(false) method, the target element text is scrolled to the bottom of the viewport: .
  • When click any of the buttons above, if the web browser does not support the tested JavaScript scrollIntoView() method capability, nothing happens and the target element text is not scrolled into the viewport.




































































































target element text






































































































3. Resources And Additional Information