jQuery移动面板打开滚动页面到顶部，如何改变这个？

Question

所以我正在开发一个jQuery手机phonegap应用程序，我注意到每次打开面板时，主页面都会自动滚动到顶部。当您打开面板时，我希望页面保持在现场。

后一堆google搜索，我发现的唯一的事情是这样的： github 这并不令人鼓舞，这： page-scrolls-back-to-top-when-the-menu-panel-is-opened-in-jquery-mobile 这并没有为我工作。

有没有人需要解决这个问题？我是jQuery的新手，所以我不认为我可以从头开始编程，但向正确的方向微调会很棒。

这里是我使用的代码：

var panel = '<div data-role="panel" id="left-panel" class="jqm-navmenu-panel" data-position-fixed="true" data-position="left" data-display="push" data-dismissible="true" data-theme="b"><ul data-role="listview"><div id="profile_pic"></div><div id="auth-loggedin" style="display: none"><p class="name_caption"><li><a href="#">Log Out</a></li></ul></div><!-- /leftpanel2 -->'; 

$(document).one('pagebeforecreate', function() { 
    $.mobile.pageContainer.prepend(panel).enhanceWithin(); 
    $("#left-panel").panel(); 
}); 

和这里的HTML

 <div data-role="header" data-position="fixed"> 
      <div id="i"> 
       <div id="header_img_1"><p>Logo 1</p></div> 
       <div id="header_img_2"><p>Logo 2</p></div> 
      </div> 
      <a href="#left-panel" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-btn-left" data-icon="bars" data-iconpos="notext">Menu</a>           
     </div><!-- /header --> 

     <div data-role="content"> 
      <div id="auth-status"> 
       <div id="auth-loggedout"> 
        <div class="fb-login-button" autologoutlink="true" scope="email,user_checkins">Login with Facebook</div> 
       </div> 
      </div> 
      <div id="auth-loggedin" style="display: none"> 
       Welcome , <span id="auth-displayname"></span>(<a href="#" id="auth-logoutlink">logout</a>) 
      </div> 
     </div><!-- /content --> 

     <div data-role="footer" data-position="fixed" data-theme="b"> 
      <p class="jqm-version"></p> 
      <p class="footer_text">Content TBD</p> 
     </div> 

    </div> 

Answer 1

它只是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); 
    } 
} 
}); 
}); 

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

更新11月16日2014年

有一个很好的指南在这里，你可以如何实现本机滚动，其滚动保持位置，即使你从一页导航到下一页

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

如果您意图让面板大于默认的width: 17em;，然后调整.ui面板内部的宽度和最大宽度

演示

http://jsfiddle.net/6zhdnen0/

Answer 2

你有没有试图把一个事件处理程序在功能和使用e.preventDefault（）;

function (e) {e.preventDefault} 

Answer 3

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

/******************************************************************************* 
 
* 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); 
 
});

Answer 4

我最近遇到了这一点，并提出了以下解决方案。

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

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