0

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.

Community
  • 1
  • 1
Phillip Senn
  • 46,771
  • 90
  • 257
  • 373
  • If you want panel to scroll only, `overflow-y: scroll;` should fix it. However it doesn't work on Android. To fix a panel, add `data-position-fixed="true"`. – Omar May 06 '14 at 21:14

1 Answers1

2

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

ezanker
  • 24,628
  • 1
  • 20
  • 35
  • this is fantastic! Q: How did you import my page into jsfiddle? Did you copy/paste my code or is there a tool to point jsfiddle to a url and have it import everything? – Phillip Senn May 07 '14 at 13:34
  • I just copied the relevant code and links manually. I don't know of any tool to automate this. – ezanker May 07 '14 at 15:03