1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    5
    Vote Rating
    1
    akshayj is on a distinguished road

      1  

    Default Unanswered: ST2 scrolling in container not working as expected

    Unanswered: 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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,645
    Vote Rating
    899
    Answers
    3574
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I personally haven't had any issues with using the scroll methods. Is all the elements within the scrollable element?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    5
    Vote Rating
    1
    akshayj is on a distinguished road

      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
    akshayj is on a distinguished road

      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.

Thread Participants: 1

Tags for this Thread