How to use $.scrollTo with a jqm panel that has a header

Question

This is a follow-up question to this SO question.

I have a new requirement where I need to add an input field to the top of the panel. So I would like $.scrollTo to affect #myContent instead of #myPanel .ui-panel-inner.

Here's the fiddle. You can see that the input field scrolls off the screen.

I thought I would try adding a div around the content:

$(document).on("pagebeforeshow", "#page1", function(){
    $('#myPanel').on('panelopen',PanelOpen);
});

function PanelOpen(myEvent, myUI ) {
   $("#myContent").scrollTo('#ID498',1000)
}

But it doesn't work.

score 3 · Accepted Answer · answered May 27 '14 at 19:59

Update your CSS so that the content is scrollable instead of the inner panel. The inner panel is still sized to fit the screen and then myContent is sized to fill the inner panel but leaving room at the top for the new input element:

.ui-panel .ui-panel-inner {
    overflow: hidden;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;  
}

#myContent {
    overflow: auto;
    position: absolute;
    top: 78px; left: 0; right: 0; bottom: 0;  
    -webkit-overflow-scrolling: touch;    
}

Then in panel open:

$("#myContent").scrollTo('#ID498',1000);

Updated FIDDLE

score 2 · Answer 2 · answered May 27 '14 at 22:49

Another way of doing it with css

#myHeader { position: fixed;  
z-index: 9999;
background-color:white;
box-shadow:  0px 0px 0px 28px white; 
}

#myContent { margin-top:35%; }

Because of the Margin above with this method you subtract 5 on your ID's to get the position below the search box

#ID493 will go to 498

Demo http://jsfiddle.net/8dJJb/

How to use $.scrollTo with a jqm panel that has a header

2 Answers2