jQuery移动面板打开滚动页到顶部，该如何更改? [英] jQuery mobile panel open scrolls page to the top, how to change this?
问题描述
因此，我正在开发一个jQuery mobilegap应用程序，我注意到每次打开面板时，主页都会自动滚动到顶部.当您打开面板时，我希望页面保留在原处.
So I'm developing a jQuery mobile phonegap app and I noticed that every time I open the panel the main page scrolls to the top automatically. I want the page to remain at the spot when you open the panel.
在一堆谷歌搜索后，我发现的唯一结果是: github 这并不令人鼓舞，这是: page-scrolls-当菜单面板在jquery移动中打开时回到顶部 这对我不起作用.
After a bunch of googling the only thing I found was this: github which wasn't encouraging, and this: page-scrolls-back-to-top-when-the-menu-panel-is-opened-in-jquery-mobile which didn't work for me.
以前有人必须解决此问题吗?我是jQuery的新手，所以我认为我不能从头开始编写某些东西，但是朝着正确的方向轻推是很棒的.
Has anyone had to fix this problem before? I'm new to jQuery so I don't think I could program something from scratch, but a nudge in the right direction would be fantastic.
这是我使用的代码:
var panel = '<div data-role="panel" id="left-panel" class="jqm-navmenu-panel" data-position-fixed="true" data-position="left" data-display="push" data-dismissible="true" data-theme="b"><ul data-role="listview"><div id="profile_pic"></div><div id="auth-loggedin" style="display: none"><p class="name_caption"><li><a href="#">Log Out</a></li></ul></div><!-- /leftpanel2 -->';
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.prepend(panel).enhanceWithin();
$("#left-panel").panel();
});
这是html
and here's the html
<div data-role="header" data-position="fixed">
<div id="i">
<div id="header_img_1"><p>Logo 1</p></div>
<div id="header_img_2"><p>Logo 2</p></div>
</div>
<a href="#left-panel" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-btn-left" data-icon="bars" data-iconpos="notext">Menu</a>
</div><!-- /header -->
<div data-role="content">
<div id="auth-status">
<div id="auth-loggedout">
<div class="fb-login-button" autologoutlink="true" scope="email,user_checkins">Login with Facebook</div>
</div>
</div>
<div id="auth-loggedin" style="display: none">
Welcome , <span id="auth-displayname"></span>(<a href="#" id="auth-logoutlink">logout</a>)
</div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-theme="b">
<p class="jqm-version"></p>
<p class="footer_text">Content TBD</p>
</div>
</div>
推荐答案
这只是JQM目前的工作方式，可能直到版本2才有了滚动物理.
Its just the way JQM works at the moment till probably Version 2 until scroll physics are in place.
目前有一些解决方法.如果面板上有很多物品，那么我建议使用Iscroll 5 http://cubiq.org/iscroll-5 ，或者如果您已经在使用Iscroll插件，则为面板创建一个滚动器.
There are some ways around it for now. If you have a lot of items on the panel then i recommend using Iscroll 5 http://cubiq.org/iscroll-5 or if you are using Iscroll plugging already then create a scroller for the panel.
但是，如果项目不多，并且您没有使用Iscroll插入以下方法，则效果很好.
However if the items are not that many and you are not using the Iscroll plugging the methods below work well.
方法A..使用CSS使面板内容的内部滚动独立于主内容页面，并避免双重滚动.
Method A. Using CSS to make the inner part of the panel contents scroll independent from the main content page and avoid dual scrolling.
CSS修复JQM 1.3、1.4 +
CSS fix JQM 1.3, 1.4+
.ui-panel.ui-panel-open {
position:fixed;
}
.ui-panel-inner {
position: absolute;
top: 1px;
left: 0;
right: 0;
bottom: 0px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
我的面板中有这个
data-position-fixed="true"
仅对于1.3，这是一个小技巧，可在面板向右滚动至顶部或向右滚动至底部并用户继续滚动时停止主页滚动.
For 1.3 only, This is a small hack to stop the main page scrolling when the panel is scrolled right to the top or right to the bottom and the user keeps scrolling.
.ui-page-active.ui-page-panel {
height: 70%;
}
演示
方法B.因为在面板打开时列表视图在顶部滚动，所以此方法会记住主列表视图的最后一个滚动位置，并在面板关闭"时对其进行动画处理.
Method B. Because the listview scrolls on top when the panel opens this method remembers the last scroll position on the main listview and animates to it upon Panel Close.
CSS
::-webkit-scrollbar { width: 0px; }
.ui-panel.ui-panel-open {
position:fixed;
}
.ui-panel-inner {
position: absolute;
width:100%;
top: 0px;
bottom: -17px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
J查询.存储(滚动时的列表视图)的位置.
J-query. store the Position of the (List-view as we scroll).
仅需注意 storePosition.topCoordinate！== 0 条件，因此我们可以避免动画(如果我们正好位于列表视图的顶部)以节省一些CPU周期.
Just to note the storePosition.topCoordinate !== 0 condition is there so we can avoid animating if we are right to the top of the list-view to save some CPU cycles.
var storePosition = {
topCoordinate : null
}
$(document).ready(function(){
$( "#mypanel" ).panel({
beforeopen: function( event, ui ) {
storePosition.topCoordinate = $(this).offset().top;
$( ".ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page" ).css("position","fixed");
}
});
$( "#mypanel" ).panel({
close: function( event, ui ) {
$( ".ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page" ).css("position","");
if($.mobile.activePage.attr("id") == "index" && storePosition.topCoordinate !== 0){
$('html, body').animate({
scrollTop: $("#mainlist").position().top += storePosition.topCoordinate - 60
}, 1000);
}
}
});
});
DEMO 1 ，面板关闭后滚动一秒钟的动画.向下滚动到任意位置，打开面板，然后关闭面板.
DEMO 1 with one second animation scrolling after panel-close. Scroll down anywhere, open the panel and then close the Panel.
DEMO 2 即时动画滚动.向下滚动到任意位置，打开面板，然后关闭面板.
DEMO 2 instant animation scrolling before panel-close. Scroll down anywhere, open the panel and then close the Panel.
更改
$( "#mypanel" ).panel({
beforeclose: function( event, ui ) {
$( ".ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page" ).css("position","");
if($.mobile.activePage.attr("id") == "index" && storePosition.topCoordinate !== 0){
$('html, body').animate({
scrollTop: $("#mainlist").position().top += storePosition.topCoordinate - 60
}, 10);
}
}
});
})
2014年11月16日更新.
这里有一个很好的指南，说明如何实现本机滚动，即使您从一页导航到下一页，该滚动条仍可保持滚动位置
there is a nice guide here on how you can achieve Native Scrolling, which keeps scrolling positions even when you navigate from one page to the next
http://outof.me/native-scrolling-in-jquery -mobilephonegap-applications/
该演示适用于旧版本的JQM，但可以与最新的1.4.5一起正常工作
the demo is for an older version of JQM but works fine with the latest 1.4.5
要使面板独立工作，您需要添加以下css
for the panels to work independently you need to add the following css
.ui-panel-inner {
position: absolute;
width: 240px;
max-width: 240px;
top: 0px;
bottom: 0px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
如果您打算使面板大于默认的width: 17em;，请在.ui-panel-inner中调整宽度和最大宽度
if you intent to have the Panels larger than the default width: 17em; then adjust the width and max width in .ui-panel-inner
演示
这篇关于jQuery移动面板打开滚动页到顶部，该如何更改?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
