Question

这是this SO question的后续问题。

我有一个新要求，我需要在面板顶部添加一个输入字段。所以我希望$ .scrollTo影响#myContent而不是#myPanel .ui-panel-inner。

Here's the fiddle。您可以看到输入字段滚动屏幕。

我以为我会尝试在内容周围添加div：

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

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

但它没有用。

Answer 1

更新CSS，以便内容可滚动而不是内部面板。内部面板的大小仍然适合屏幕，然后调整myContent的大小以填充内部面板，但为新输入元素留出顶部空间：

.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;    
}

然后在小组打开：

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

更新了 FIDDLE

Answer 2

使用css

执行此操作的另一种方法

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

#myContent { margin-top:35%; }

由于使用此方法的上述保证金，您在ID上减去5以获得搜索框下方的位置

#ID493将转到498

演示http://jsfiddle.net/8dJJb/

如何将$ .scrollTo与带有标题的jqm面板一起使用

2 个答案: