从内容中单独滚动JQuery移动面板
从内容中单独滚动JQuery移动面板
提问于 2013-05-01 01:16:44
我正在使用JQuery Mobile开发一个HTML5移动应用程序。设计需要一个侧边栏菜单，它可以独立于主要内容滚动，例如，您可以在页面上的某个位置滚动，打开菜单并在该菜单内滚动，而不滚动页面内容。
为了实现菜单，JQuery移动幻灯片面板是一个显而易见的选择。但是，我还没能让它们与内容分开滚动。
我尝试过使用带有和不带有iScrollView插件的iScroll 4来滚动JQuery移动幻灯片面板，但在面板中的滚动不起作用，只能在页面内容中的元素上滚动。面板的内容可以被推和拉，但会迅速回到它的起始位置(“橡皮筋”效果)。
我也尝试过使用jScroll来定位由JQuery手机创建的div (“.ui-jScroll-JQuery”)，但是结果是一样的。
在显示面板后对iScroll对象调用refresh()也不起作用。
我即将忘记使用内置的JQuery移动幻灯片面板来实现这一点，有谁知道可以独立于内容分区滚动JQuery移动面板的解决方案吗？
回答 5
Stack Overflow用户
回答已采纳
发布于 2013-06-20 01:30:51
这也快把我逼疯了。我在this forum response上使用了这个解决方案
将此CSS添加到JQueryMobile样式表之后：
.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;
}Stack Overflow用户
发布于 2013-10-31 16:42:03
.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;
}这是Alison Tinker提供的解决方案。若要防止scroll在没有可滚动的情况下显示，请更改；
overflow: scroll;至
overflow: auto;Stack Overflow用户
发布于 2013-05-28 16:10:03
我和你也有类似的情况。我需要在左边的面板上有一个静态菜单。我不想让面板滚动。
然后，我使用data-position-fixed="true"。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16305488
复制相关文章
相似问题