所以我正在开发一个jQuery手机屏幕应用程序,我注意到每次打开面板时主页面都会自动滚动到顶部.我希望打开面板时页面保持在现场.
经过一堆谷歌搜索之后,我发现的唯一一件事是: github 并不令人鼓舞,而且这个: 页面滚动 - 返回顶部 - 菜单面板 - 打开 - 在jquery-mobile 这对我不起作用.
有没有人不得不解决这个问题？我是jQuery的新手所以我不认为我可以从头开始编程,但是在正确的方向上推动会很棒.
这是我正在使用的代码:
var panel = '
Tasos.. 12
它就像JQM目前的工作方式,直到版本2,直到滚动物理到位.
现在有一些方法可以解决它.如果面板上有很多项目,那么我建议使用Iscroll 5 http://cubiq.org/iscroll-5,或者如果您已经使用Iscroll插件,那么为面板创建一个滚动条.
但是,如果项目不是很多并且您没有使用Iscroll插件,则下面的方法可以正常工作.
方法A.使用CSS使面板内容的内部滚动独立于主内容页面并避免双滚动.
CSS修复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,当面板向右或向右滚动并且用户继续滚动时,这是一个停止主页面滚动的小黑客.
.ui-page-active.ui-page-panel {
height: 70%;
}
演示
http://jsfiddle.net/qsXzD/5/
方法B.因为当面板打开时列表视图在顶部滚动,此方法会记住主列表视图中的最后一个滚动位置,并在面板关闭时动画显示它.
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-查询.存储(滚动时列表视图)的位置.
只是要注意storePosition.topCoordinate!== 0条件是存在的,所以我们可以避免动画,如果我们是正确的列表视图的顶部,以节省一些CPU周期.
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);
}
}
});
});
面板关闭后滚动1秒钟的DEMO 1.向下滚动,打开面板,然后关闭面板.
http://jsfiddle.net/srym7v4m/
面板关闭前的DEMO 2即时动画滚动.向下滚动,打开面板,然后关闭面板.
http://jsfiddle.net/3yyjkkya/
变化
$( "#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日更新.
这里有一个很好的指南,介绍如何实现Native Scrolling,即使您从一个页面导航到下一个页面,它仍可保持滚动位置
http://outof.me/native-scrolling-in-jquery-mobilephonegap-applications/
该演示适用于较旧版本的JQM,但与最新的1.4.5配合使用
要使面板独立工作,您需要添加以下css
.ui-panel-inner {
position: absolute;
width: 240px;
max-width: 240px;
top: 0px;
bottom: 0px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
如果您打算让Panel大于默认值,width: 17em;则调整.ui-panel-inner中的宽度和最大宽度
演示
http://jsfiddle.net/6zhdnen0/
它就像JQM目前的工作方式,直到版本2,直到滚动物理到位.
现在有一些方法可以解决它.如果面板上有很多项目,那么我建议使用Iscroll 5 http://cubiq.org/iscroll-5,或者如果您已经使用Iscroll插件,那么为面板创建一个滚动条.
但是,如果项目不是很多并且您没有使用Iscroll插件,则下面的方法可以正常工作.
方法A.使用CSS使面板内容的内部滚动独立于主内容页面并避免双滚动.
CSS修复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,当面板向右或向右滚动并且用户继续滚动时,这是一个停止主页面滚动的小黑客.
.ui-page-active.ui-page-panel {
height: 70%;
}
演示
http://jsfiddle.net/qsXzD/5/
方法B.因为当面板打开时列表视图在顶部滚动,此方法会记住主列表视图中的最后一个滚动位置,并在面板关闭时动画显示它.
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-查询.存储(滚动时列表视图)的位置.
只是要注意storePosition.topCoordinate!== 0条件是存在的,所以我们可以避免动画,如果我们是正确的列表视图的顶部,以节省一些CPU周期.
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);
}
}
});
});
面板关闭后滚动1秒钟的DEMO 1.向下滚动,打开面板,然后关闭面板.
http://jsfiddle.net/srym7v4m/
面板关闭前的DEMO 2即时动画滚动.向下滚动,打开面板,然后关闭面板.
http://jsfiddle.net/3yyjkkya/
变化
$( "#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日更新.
这里有一个很好的指南,介绍如何实现Native Scrolling,即使您从一个页面导航到下一个页面,它仍可保持滚动位置
http://outof.me/native-scrolling-in-jquery-mobilephonegap-applications/
该演示适用于较旧版本的JQM,但与最新的1.4.5配合使用
要使面板独立工作,您需要添加以下css
.ui-panel-inner {
position: absolute;
width: 240px;
max-width: 240px;
top: 0px;
bottom: 0px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
如果您打算让Panel大于默认值,width: 17em;则调整.ui-panel-inner中的宽度和最大宽度
演示
http://jsfiddle.net/6zhdnen0/
京公网安备 11010802040832号 | 京ICP备19059560号-6 