scrollTop vs scrollIntoView() (v2)

Revision 2 of this benchmark created on June 4, 2014

Description

Preparation HTML

<div class="test">
    <div id="left">
        <div class="buttons">
            <button>Go to #1</button>
            <button>Go to #2</button>
        </div>
        <div>
            <p>Paragraph #1</p>
            <p>Paragraph #2</p>
        </div>
    </div>
    <div id="right">
        <div class="buttons">
            <button>Go to #1</button>
            <button>Go to #2</button>
        </div>
        <div>
            <p>Paragraph #1</p>
            <p>Paragraph #2</p>
        </div>
    </div>
</div>

<style>
.test {
    font-family: sans-serif;
}

.test #left,
.test #right {
    position: relative;
    float: left;
    box-sizing: border-box;
    width: 50%;
    height: 300px;
    padding: 10px;
    background: lightblue;
    overflow: auto;
}

.test #right {
    background: lightgrey;
}

.test #left:before,
.test #right:before {
    content: "scrollIntoView";
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    text-align: center;
    font-size: 50px;
    line-height: 1em;
    font-weight: bold;
    color: rgba(0, 0, 0, .1);
}

.test #right:before {
    content: "scrollTop";
}

.buttons {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    text-align: center;
}

.test p {
    margin-top: 50px;
}

.test p:last-child {
    margin-top: 5000px;
    margin-bottom: 5000px;
}
</style>
<script>
  var paragraphs = document.getElementsByTagName("p"),
      toScrollTo = [
         paragraphs[1],
         paragraphs[2]
      ];
</script>

Setup

scrollTop = 0;

Test runner

scrollTop = toScrollTo[0].offsetTop;

toScrollTo[1].scrollIntoView(true);

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published on December 28, 2013
• Revision 2: published on June 4, 2014