滚动JQuery移动面板单独从内容

我正在使用JQuery Mobile的HTML 5移动应用程序。该设计需要一个可以独立于主内容滚动的边栏菜单，例如，您可以在页面某处滚动，打开菜单并在该菜单内滚动而不滚动页面内容。滚动JQuery移动面板单独从内容

要实现菜单，JQuery Mobile滑动面板是一个明显的选择。但是，我无法让他们单独滚动内容。

我试过使用iScroll 4和不使用iScrollView插件来滚动JQuery Mobile幻灯片面板，但滚动在面板中不起作用，仅在页面内容的元素中起作用。面板的内容可以被推拉，但会回到其起始位置（“橡皮筋”效果）。

我也尝试过使用jScroll来定位由jQuery mobile（“.ui-panel-inner”）创建的div，但结果相同。

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

我即将忘掉使用内置的JQuery Mobile滑动面板为了使这项工作，有没有人知道一个解决方案独立于内容div滚动JQuery Mobile面板？

来源

2013-04-30 Kirkpatrick

我和你有类似的情况。我需要在左侧面板上的静态菜单。我不希望面板滚动。

然后，我用data-position-fixed="true"。

来源

2013-05-28 08:10:02 iqbal

它不工作我... – rkaartikeyan 2013-08-11 21:18:19

我相信这解决了相反的问题 - 滚动页面，而固定面板。 – 2015-07-22 17:36:27

这也让我发疯。我用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; 
    }

来源

2013-06-19 17:30:50

它总是显示滚动条，即使它不溢出，我怎么能解决这个问题。 – 2013-10-13 15:44:51

此解决方案对我无效。如果你有主页和面板溢出，两者都将滚动。 – 2013-11-23 02:22:35

确保添加一个类为'ui-panel-inner'的元素，原因是默认没有插入 – 2014-01-10 20:39: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; 
}

这是艾莉森·廷克提供的解决方案。为了防止滚动显示什么时候没有滚动，请更改;

overflow: scroll;

到

overflow: auto;

来源

2013-10-31 08:42:03 Diamond

我认为你有当面板打开

检查，如果面板打开，U纷纷加入到BODY此类修正内容.ui- panel.ui-panel-open

你必须设置position：fixed！important; .ui-panel.ui-panel-open下面的.ui-panel-wrapper打开

来源

2014-08-06 09:36:01

请参考我的解决方案，使用以上样式表为内部面板使用由panelbeforeopen/panelbeforeclose触发的动态css设置。

$(document).on("panelbeforeopen", "#panel", function() { $(".ui-panel").css({ "overflow": "hidden" }); $(".ui-content").css({ "overflow": "hidden", "position": "fixed" }); }).on("panelbeforeclose", "#panel", function() { $(".ui-panel").css({ "overflow": "hidden" }); $(".ui-content").css({ "overflow": "scroll", "position": "absolute" }); });

http://jsfiddle.net/ohxdtwga/

贴页脚更新：

http://jsfiddle.net/u92m7u2n/

来源

2014-11-12 12:10:56 metamagicson

滚动JQuery移动面板单独从内容

回答

相关问题