CODEWITHSUNDEEP
jquery-mobile
Phillip Senn
Phillip Senn

Reputation: 47605

$.scrollTo doesn't work with position:fixed;

I have a jqm page with a panel. And I want the panel to scroll to a certain position. Using the $scrollTo plugin works, but it scrolls both the panel and the page itself.

$('#myPanel').on('panelopen',PanelOpen)
function PanelOpen(myEvent, myUI ) {
    $.scrollTo('#ID498',1000)
}

Here's my example showing it scroll the panel (hooray), and the page (boo).

Now, from this SO thread, I was able to make the panel scrollable:

#myPanel .ui-panel.ui-panel-open {
    position:fixed;
}
#myPanel .ui-panel-inner {
    position: absolute;
    top: 1px;
    left: 0;
    right: 0;
    bottom: 0px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

But now the $.scrollTo plugin doesn't work. Here's my second example, this time with the panel scrollable, but I can no longer position it using JavaScript.

Upvotes: 0

Views: 536

Answers (1)

ezanker
ezanker

Reputation: 24738

I think you just need to call the scrollTo() on the inner panel div which is actually set to overflow and it will work:

function PanelOpen(myEvent, myUI ) {
    $("#myPanel .ui-panel-inner").scrollTo('#ID498',1000)
}

Here is a working DEMO

Upvotes: 2

Related Questions