[2.2] Unexpected behavior of Element.scrollIntoView()

**jdunsworth** · 18 Nov 2008 10:11 AM

I've encountered a bit of strangeness with the scrollIntoView function. Basically, if you call scrollIntoView on an element that is already visible, you get scrolled down some additional amount, whereas I would expect no scrolling to occur in this case.

I've attached a simple test case that should demonstrate the issue.

I'd like to know whether this is the expected behavior before I implement a workaround.

Thanks

HTML Code:

<html>
  <head>
    <title>scrollIntoView Test</title>
    <style type="text/css">
      .element {
        background: lightGrey;
        margin: 1em;
        padding: 1em;
        border: 1px solid grey;
        height: 200px;
      }
      .emptySpace {
        height: 100%;
    border: 1px dashed grey;
        margin: 1em;
      }
    </style>
    <link rel="stylesheet" type="text/css" href="http://extjs.com/deploy/dev/resources/css/ext-all.css" />
    <script type="text/javascript" src="http://extjs.com/deploy/dev/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="http://extjs.com/deploy/dev/ext-all-debug.js"></script>
  </head>
  <body>
    <pre>
    Test:
    Click the first button to call Ext.get('element1').scrollIntoView().

    Expected result:
    The page will scroll until the div containing the text "element 1" is fully in view.

    Click the next button to call Ext.get('element1').scrollIntoView() again.

    Expected result:
    Nothing will happen, because element1 is already fully in view.

    Actual result:
    The page will scroll down some additional amount (appears to be whatever the current scrollTop is).
    </pre>
    <input type="button" onclick="Ext.get('element1').scrollIntoView();" value="1: Scroll element 1 into view" />
    <div class="emptySpace">
    </div>
    <input type="button" onclick="Ext.get('element1').scrollIntoView();" value="2: Scroll element 1 into view" />
    <div id="element1" class="element">
      element 1
    </div>
    <div class="emptySpace">
    </div>
  </body>
</html>

**jsakalos** · 18 Nov 2008 11:52 AM

I think that that is the default behavior. You can also try to enclose elements to a container, not body, and pass this container as first argument to scrollIntoView to see if it changes anything.

**jdunsworth** · 3 Dec 2008 8:19 AM

Can I file this as a bug then? It seems wrong that scrollIntoView would do anything when the element is already in view.

**jsakalos** · 3 Dec 2008 11:22 AM

Sure. Do you want me to move this thread to Bugs?

**jdunsworth** · 3 Dec 2008 12:13 PM

Yes, please.

**jsakalos** · 3 Dec 2008 12:23 PM

Moved.

[2.2] Unexpected behavior of Element.scrollIntoView()

Thread Tools

Search Thread

Display

[2.2] Unexpected behavior of Element.scrollIntoView()

[2.2] Unexpected behavior of Element.scrollIntoView()