- 首页
- 其他开发
- jQuery 移动面板打开将页面滚动到顶部，如何更改?
jQuery 移动面板打开将页面滚动到顶部，如何更改?
[英] jQuery mobile panel open scrolls page to the top, how to change this?
本文介绍了jQuery 移动面板打开将页面滚动到顶部，如何更改?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我正在开发一个 jQuery mobile phonegap 应用程序，我注意到每次打开面板时主页都会自动滚动到顶部.我希望页面在您打开面板时保持在原处.
经过一番谷歌搜索后，我发现的唯一一件事是:github这并不令人鼓舞，而这个:page-scrolls-在 jquery-mobile 中打开菜单面板时返回顶部这对我不起作用.
以前有人解决过这个问题吗?我是 jQuery 的新手，所以我不认为我可以从头开始编程，但是朝着正确的方向推动会很棒.
这是我正在使用的代码:
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="#">注销</a>;</li></ul></div><!--/leftpanel2 -->';$(document).one('pagebeforecreate', function () {$.mobile.pageContainer.prepend(panel).enhanceWithin();$("#left-panel").panel();});
这是html
<div id="i"><div id="header_img_1"><p>标志 1</p></div><div id="header_img_2"><p>标志 2</p></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="条" data-iconpos="notext">菜单</a></div><!--/header --><div data-role="内容"><div id="auth-status"><div id="auth-loggedout"><div class="fb-login-button" autologoutlink="true" scope="email,user_checkins">使用 Facebook 登录</div>
<div id="auth-loggedin" style="display: none">欢迎，<span id="auth-displayname"></span>(<a href="#" id="auth-logoutlink">注销</a>)
</div><!--/content --><div data-role="footer" data-position="fixed" data-theme="b"><p class="jqm-version"></p><p class="footer_text">内容待定</p>
解决方案
这只是 JQM 目前的工作方式，直到可能是第 2 版，直到滚动物理就位.
目前有一些解决方法.如果面板上有很多项目，那么我建议使用 Iscroll 5 http://cubiq.org/iscroll-5 或者如果您已经在使用 Iscroll 插入，则为面板创建一个滚动条.
但是，如果项目不是那么多，并且您没有使用 Iscroll 插件，则下面的方法效果很好.
方法 A. 使用 CSS 使面板内容的内部滚动独立于主内容页面，避免双重滚动.
CSS 修复 JQM 1.3、1.4+
.ui-panel.ui-panel-open {位置:固定；}.ui-面板内{位置:绝对；顶部:1px；左:0；右:0；底部:0px；溢出:滚动；-webkit-overflow-scrolling:触摸；}
我的面板中有这个
data-position-fixed="true"
仅适用于 1.3，这是一个小技巧，可在面板向右滚动到顶部或向右滚动到底部并且用户继续滚动时停止主页滚动.
.ui-page-active.ui-page-panel {高度:70%；}
演示
http://jsfiddle.net/qsXzD/5/
方法 B. 因为当面板打开时列表视图会在顶部滚动，所以此方法会记住主列表视图上的最后滚动位置，并在面板关闭时为其设置动画.
CSS
::-webkit-scrollbar { 宽度:0px;}.ui-panel.ui-panel-open {位置:固定；}.ui-面板内{位置:绝对；宽度:100%；顶部:0px；底部:-17px；溢出:滚动；-webkit-overflow-scrolling:触摸；}
J-query. 存储(滚动时列表视图)的位置.
只是要注意 storePosition.topCoordinate !== 0 条件的存在，这样我们就可以避免动画，如果我们正好在列表视图的顶部以节省一些 CPU 周期.
var storePosition = {顶部坐标:空}$(document).ready(function(){$( "#mypanel" ).panel({beforeopen:函数(事件，用户界面){storePosition.topCoordinate = $(this).offset().top;$( ".ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page" ).css("position","fixed");}});$( "#mypanel" ).panel({关闭:函数(事件，用户界面){$( ".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，在面板关闭后滚动一秒动画.向下滚动到任意位置，打开面板，然后关闭面板.
http://jsfiddle.net/srym7v4m/
DEMO 2 面板关闭前滚动的即时动画.向下滚动到任意位置，打开面板，然后关闭面板.
http://jsfiddle.net/3yyjkkya/
变化
$( "#mypanel" ).panel({关闭前:函数(事件，用户界面){$( ".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 日更新.
这里有一个很好的指南，介绍如何实现原生滚动，即使您从一页导航到下一页也能保持滚动位置
http://outof.me/native-scrolling-in-jquery-mobilephonegap-applications/
该演示适用于旧版本的 JQM，但适用于最新的 1.4.5
要使面板独立工作，您需要添加以下 css
.ui-panel-inner {位置:绝对；宽度:240px；最大宽度:240px；顶部:0px；底部:0px；溢出:滚动；-webkit-overflow-scrolling:触摸；}
如果你想让面板大于默认的 width: 17em; 然后在 .ui-panel-inner 中调整宽度和最大宽度
演示
http://jsfiddle.net/6zhdnen0/
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.
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.
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.
here's the code I'm using:
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();
});
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>
解决方案
Its just the way JQM works at the moment till probably Version 2 until scroll physics are in place.
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.
However if the items are not that many and you are not using the Iscroll plugging the methods below work well.
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 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;
}
i have this in my panel
data-position-fixed="true"
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%;
}
Demo
http://jsfiddle.net/qsXzD/5/
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-query. store the Position of the (List-view as we scroll).
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 with one second animation scrolling after panel-close. Scroll down anywhere, open the panel and then close the Panel.
http://jsfiddle.net/srym7v4m/
DEMO 2 instant animation scrolling before panel-close. Scroll down anywhere, open the panel and then close the Panel.
http://jsfiddle.net/3yyjkkya/
Changes
$( "#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);
}
}
});
})
Update 16 November 2014.
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/
the demo is for an older version of JQM but works fine with the latest 1.4.5
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;
}
if you intent to have the Panels larger than the default width: 17em; then adjust the width and max width in .ui-panel-inner
Demo
http://jsfiddle.net/6zhdnen0/
这篇关于jQuery 移动面板打开将页面滚动到顶部，如何更改?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
