1. #1
    Ext User
    Join Date
    Nov 2008
    Posts
    4
    Vote Rating
    0
    jdunsworth is on a distinguished road

      0  

    Question [2.2] Unexpected behavior of Element.scrollIntoView()

    [2.2] Unexpected behavior of Element.scrollIntoView()


    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>

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,521
    Vote Rating
    377
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    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.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  3. #3
    Ext User
    Join Date
    Nov 2008
    Posts
    4
    Vote Rating
    0
    jdunsworth is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,521
    Vote Rating
    377
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Sure. Do you want me to move this thread to Bugs?
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  5. #5
    Ext User
    Join Date
    Nov 2008
    Posts
    4
    Vote Rating
    0
    jdunsworth is on a distinguished road

      0  

    Default


    Yes, please.

  6. #6
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,521
    Vote Rating
    377
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Moved.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


Thread Participants: 1