jQuery移动面板打开滚动页面到顶部，如何更改此？

它就像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%; } 

演示

http://jsfiddle.net/qsXzD/5/

方法B.由于列表视图在面板打开时滚动到顶部，因此该方法会记住主列表视图中的最后一个滚动位置，并在面板关闭时激活它。

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-查询。 存储（滚动时列表视图）的位置。

请注意storePosition.topCoordinate！== 0条件是存在的，所以我们可以避免动画，如果我们在列表视图的顶部是正确的，以节省一些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); } } }); }); 

面板关闭后滚动1秒钟的DEMO 1 。 向下滚动，打开面板，然后关闭面板。

http://jsfiddle.net/srym7v4m/

在面板关闭之前， DEMO 2即时动画滚动。 向下滚动，打开面板，然后关闭面板。

http://jsfiddle.net/3yyjkkya/

变化

 $( "#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 Scrolling，即使您从一个页面导航到下一个页面，它仍可保持滚动位置

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

如果您打算让Panel大于默认width: 17em; 然后在.ui-panel-inner中调整宽度和最大宽度

演示

http://jsfiddle.net/6zhdnen0/

您是否尝试在函数中放置事件处理程序并使用e.preventDefault（）;

 function (e) {e.preventDefault} 

我最近遇到过这个并提出以下解决方案。

1.-当用户单击菜单链接时，运行名为menuOpen的function

 function menuOpen(){ var scrollTop = window.document.body.scrollTop; //You can replace this with a regular menu open. I use some code that places the same menu panel on every page so that I only have to write it once, but it causes a duplicate ID of "menupanel"- hence the code that will only open #menupanel on the current active page $.mobile.activePage.find('#menupanel').panel("open"); window.document.body.scrollTop = scrollTop; } 

这是我写的一个选项。 它需要在面板打开之前存储页面的滚动位置，并在面板关闭时恢复它。 我有一些非常长的面板，这对我有用。 这是一般性的，所以它连接到所有面板。 您可以将选择器更改为仅针对某些面板进行连线。

 /******************************************************************************* * When a panel opens, it makes you lose your place whithin the main page. * These functions fix that by tracking where you are in the page before the * panels opens and restoring that position when the panel closes ******************************************************************************/ $(document).on("panelbeforeopen", "[data-role=page]", function(e) { /* if page we're leaving is a regular page, store the scroll position */ if ($.mobile.activePage.attr("data-role")=="page" && $("body").scrollTop()!=0) { window._scrollTop = $("body").scrollTop(); } }); $(document).on("panelopen", "[data-role=panel]", function(e) { /* when the panel finishes opening scroll to the top $.mobile.silentScroll(0); }); $(document).on("panelclose", "[data-role=panel]", function(e) { /* when the panel closes, restore the last stored scroll position */ $.mobile.silentScroll(window._scrollTop); });