我正在使用JQuery Mobile处理一个HTML 5移动应用程序。该设计要求可以独立于主要内容滚动的侧边栏菜单,因此,例如,您可以滚动页面上的某个位置,打开菜单并在该菜单中滚动,而不滚动页面内容。
要实现菜单,JQuery Mobile滑块是一个明显的选择。但是,我无法让它们与内容分开滚动。
我试过使用带有和不带有iScrollView插件的iScroll 4来滚动一个JQuery Mobile滑动面板,但滚动在面板中不起作用,仅在页面内容的元素上。面板的内容可以被推拉,但会弹回到其起始位置(“橡皮筋”效果)。
我也试过使用jScroll来定位由JQuery mobile(“.ui-panel-inner”)创建的div,但是效果也是一样的。
显示面板后,在iScroll对象上调用refresh()也不起作用。
我将不得不忘记使用内置的JQuery Mobile滑盖板来完成这项工作,有没有人知道一个独立于内容div滚动JQuery Mobile面板的解决方案?
解决方法
这也让我疯狂了。我在
this forum response上使用了这个解决方案
在JQueryMobile样式表之后添加此CSS:
.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; }