- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以我正在开发一个 jQuery 手机应用程序,我注意到每次打开面板时主页都会自动滚动到顶部。我希望当您打开面板时页面保留在原处。
经过一番谷歌搜索后,我唯一发现的是: github这并不令人鼓舞,这是: page-scrolls-back-to-top-when-the-menu-panel-is-opened-in-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="#">Log Out</a></li></ul></div><!-- /leftpanel2 -->';
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.prepend(panel).enhanceWithin();
$("#left-panel").panel();
});
这是 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 为止,直到滚动物理到位。
目前有一些方法可以解决这个问题。如果面板上有很多项目,那么我建议使用 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%;
}
演示
方法 B. 因为当面板打开时 ListView 会在顶部滚动,所以此方法会记住主 ListView 上的最后一个滚动位置,并在面板关闭时为其设置动画。
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。存储(滚动时的 ListView )的位置。
请注意 storePosition.topCoordinate !== 0 条件的存在,因此如果我们位于 ListView 的顶部,我们可以避免动画以节省一些 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);
}
}
});
});
DEMO 1,面板关闭后滚动一秒动画。向下滚动任意位置,打开面板,然后关闭面板。
DEMO 2面板关闭前即时动画滚动。向下滚动任意位置,打开面板,然后关闭面板。
更改
$( "#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 滚动,即使您从一个页面导航到下一页,它也会保持滚动位置
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;
}
如果您想让面板大于默认宽度:17em;
,请在 .ui-panel-inner 中调整宽度和最大宽度
演示
关于jQuery移动面板打开卷轴页面到顶部,如何改变这个?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22672236/
我有以下MWE function f(p) ans = zeros(p, 2) return ans end ans = f(2) ans b=ans.+1.0 ans 起初,ans是正确的,
OWIN AppBuilder“UseStatic”位从本地文件系统传送文件,这在某些情况下很方便,但我希望它从我在应用程序启动时预先填充的内存中 IDictionary 传送内容。任何人都可以指出一
我是 JavaScript 新手。 我的代码允许我列出 JSON 文档的元素及其类型,并将所有元素连接到一个字符串 donnees_types 中。 问题是 JavaScript 中的 typeof
我想在每次刷新时更改主页上的背景图像。我怎样才能做到这一点?我认为 jquery 是可能的,但我不太清楚。 感谢您对此主题的任何帮助或评论。 最佳答案 我不知道“如何”,但我找到了以下链接: http
所以我已经在这上面花了几个小时了,老实说我完全陷入困境。我写了一个 for 循环来计算整数中的数字数量,但我发现一旦我输入 10 位以上的数字,除数值就会发生变化,而且我不明白为什么。我在互联网上搜索
当我在使用表面 View 的游戏 Activity 和使用膨胀菜单的其他 Activity 之间切换时,我会收到错误消息。 日志猫: 07-13 15:15:34.464: ERROR/Android
听说很简单 R*=f; G*=f; B*=f; 其中 f 是标量值 0 .. 1.0 或更大改变亮度的方法不太正确颜色,但我找不到一些代码片段获得更好的东西(无需太多学习色彩理论)也许有人可以在这里给
如以下链接所述:- How to get the ThreadPoolExecutor to increase threads to max before queueing? 我将队列实现更改为在进入
我只显示最初提供 20 分钟 slotMinutes 的日历。我试图让用户即时更改为 10 分钟的 slotMinutes。 我有一个触发以下代码的按钮: $('#calendar').fullCal
我的问题是:我的应用程序中有一个新闻列表(UITableView)当我点击 1 个"new"时,我打开它,里面有一个后退按钮,可以让我回到列表。现在的问题是我必须在滑动时实现"new"更改,所以我制作
我面临着与 I'm trying to install psycopg2 onto Mac OS 10.6.3; it claims it can't find "stdarg.h" but I ca
需要通过为 array2 中不存在的索引设置 visible false 来从 array1 创建一个新的 array3。 在下面的示例中,我有索引 0,2。所以对于 1,3,结果数组必须具有 vis
我有一个对象,类似这样 var Egg = function(){ this.test = $(.slider .label); $('.slider').slider({
我想改变 ScrollView 的宽度。首先,我这样做了: var scrollWidthConstraint: NSLayoutConstraint! 然后设置它: scrollWidthConst
我有两个动画,一个是“过渡”,它在悬停时缩小图像,另一个是 animation2,其中图像的不透明度以周期性间隔重复变化。 我有 animation2 在图像上进行,当我将鼠标悬停在它上面时,anim
我是一个 jQuery 新手,一直在尝试添加一个脚本来更改 div onClick 的 id。 这是一个jsfiddle example . $(function accept() { $("
我正在尝试更改用户输入的字母的大小写,并将该字母的小写和大写版本存储在变量中。我已经编写了下面的代码,但它在运行时遇到了问题。有人指出是什么导致了问题吗? #include #include #i
假设我有这段代码: char num[2] = {15, 240}; char* p_num; 现在,如果我理解的一切正确,数组中的位应该像这样对齐: 00001111 11110000 我的问题是
var html = '' + count + '' + i.Description + '' + i.Priority + '' + i.Status + 'johnsmith- ' + creat
我在虚拟机上安装了 minix3,并希望我可以操纵当前的队列选择算法,以便我可以将其从优先级顺序更改为包括随机分类的低优先级作业的优先级顺序。我发现我需要更改的代码部分在 proc.c 中,具体部分是
我是一名优秀的程序员,十分优秀!