Results 1 to 4 of 4

Thread: ST2 scrolling in container not working as expected

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    5
    Vote Rating
    1
      1  

    Default ST2 scrolling in container not working as expected

    Hi,

    I have a Ext.Container setup with vertical scroll and a table of contents. I've also added anchor elements for "Back to top" from anywhere within the container, as shown below.

    Ext.define("abcd.xyz.view.FullDocument", {
    extend: 'Ext.Container',
    xtype: 'fulldocument',

    config: {
    xtype: 'container',
    title: 'Document',
    html: 'loading document...',
    scrollable: { direction: 'vertical' },
    listeners:{
    element: 'element',
    delegate: 'div.toc a',
    tap: function(e, node, options, eOpts){
    var id = Ext.fly(node).dom.parentElement.href.split('#')[1];
    var targetElemTop = Ext.fly(id).dom.offsetTop;
    var scroller = this.getScrollable().getScroller();
    scroller.scrollTo(0, targetElemTop, true);
    }
    }
    }
    });

    I don't want to use named anchors here for scrolling to elements for various reasons(majorly not changing the url) so I'm handling the scrolling on my own as above. However, once I scroll to an element on the container, I'm unable to scroll above that element. It somehow starts treating that element as page top and will refuse to scroll above that element.

    Any idea what might be happening here?

    Thanks.

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    I personally haven't had any issues with using the scroll methods. Is all the elements within the scrollable element?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    5
    Vote Rating
    1
      0  

    Default

    Yes, all the elements are within the scrollable container. Is there anymore information I can provide that might help?

  4. #4
    Sencha User
    Join Date
    Jul 2012
    Posts
    5
    Vote Rating
    1
      0  

    Default

    I believe I was able to narrow this down to a test case.

    I have a container with a named anchor that obviously points to another point in the same page. I also have a "Back to Top" link that scrolls to pageTop using the following code:

    container.getScrollable().getScroller().scrollTo(0, 0, true);

    Steps to reproduce:
    1) Scroll the container manually to the anchor. 'x-scroll-scroller' has a -webkit-transform-translate3d style that changes its y-axis value as the page scrolls.
    2) Click on the named anchor. Container scrolls to the named anchor's destination. 'x-scroll-scroller' style does not change.
    3) Click on 'Back to Top'. Page scrolls up but only by the amount that the scroller's y axis was initially offset by. This is NOT necessarily the top of the page. Now the scroller starts treating that point as the new page top, and will refuse to scroll above that point.

    I believe the scroller should adjust its transform style even for named anchor jumps.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •