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

Question

所以我正在开发一个 jQuery mobile phonegap 应用程序，我注意到每次打开面板时，主页都会自动滚动到顶部。我希望页面在您打开面板时保留在原地。

经过一番谷歌搜索后，我发现的唯一内容是： 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-query。存储（我们滚动时的列表视图）的位置。

请注意 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);
  }
}
});
 })

2014 年 11 月 16 日更新。

这里有一个很好的指南，说明如何实现本机滚动，即使您从一个页面导航到下一个页面，它也会保持滚动位置

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-panel-inner 中调整宽度和最大宽度

演示

http://jsfiddle.net/6zhdnen0/

Answer 2

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

function (e) {e.preventDefault}

Answer 3

我最近遇到了这个问题并想出了以下解决方案。

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

Answer 4

这是我写的一个选项。它采用在面板打开之前存储页面的滚动位置并在面板关闭时恢复它的方法。我有一些非常长的面板，这对我有用。这是通用编写的，因此它连接到所有面板。您可以更改选择器以仅连接到某些面板。

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