与内容分开滚动JQuery移动面板 [英] Scroll JQuery Mobile Panel Separately From Content

查看:98
本文介绍了与内容分开滚动JQuery移动面板的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用JQuery Mobile开发HTML 5移动应用程序.该设计要求侧边栏菜单可以独立于主要内容滚动,例如,您可以滚动页面上的某个位置,打开菜单并在该菜单内滚动,而无需滚动页面内容.

I'm working on an HTML 5 mobile app using JQuery Mobile. The design calls for a sidebar menu that can scroll independently of the main content, so for example you could scroll somewhere on the page, open the menu and scroll within that menu without the page contents scrolling.

要实现菜单,JQuery Mobile滑动面板是显而易见的选择.但是,我无法让它们与内容分开滚动.

To implement the menu, JQuery Mobile slide panels were an obvious choice. However, I haven't been able to get them to scroll separately from the content.

我尝试使用带有和不带有 iScrollView 插件的iScroll 4来滚动JQuery Mobile滑动面板,但是滚动仅在页面内容中的元素上无法在面板中进行.面板的内容可以被推拉,但会恢复到其初始位置(橡皮筋"效果).

I've tried using iScroll 4 with and without the iScrollView plugin to scroll a JQuery Mobile slide panel, but the scrolling does not work in the panel, only on elements in the page content. The panel's contents can be pushed and pulled, but will snap back to its starting position (the "rubber band" effect).

我还尝试使用 jScroll 定位由以下项创建的div jQuery mobile(.ui-panel-inner"),但结果相同.

I've also tried using jScroll to target the div that is created by JQuery mobile (".ui-panel-inner"), but that had the same results.

显示面板后在iScroll对象上调用refresh()也不起作用.

Calling refresh() on the iScroll object after showing the panel also did not work.

我将忘记使用内置的JQuery Mobile滑动面板来使这项工作有效,有人知道一种独立于内容div滚动JQuery Mobile面板的解决方案吗?

I'm about to forget about using the built in JQuery Mobile slide panels in order to make this work, does anyone know of a solution to scroll a JQuery Mobile panel independently from the content div?

推荐答案

这也使我发疯.我在此论坛回复

在JQueryMobile样式表之后添加此CSS:

Add this CSS after the JQueryMobile stylesheet:

    .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;
    }

这篇关于与内容分开滚动JQuery移动面板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆