jQuery mobile panel open scrolls page to the top, how to change this?

前端 未结 4 1589
误落风尘
误落风尘 2021-01-07 01:43

So I\'m developing a jQuery mobile phonegap app and I noticed that every time I open the panel the main page scrolls to the top automatically. I want the page to remain at t

4条回答
  •  甜味超标
    2021-01-07 02:13

    Its just the way JQM works at the moment till probably Version 2 until scroll physics are in place.

    There are some ways around it for now. If you have a lot of items on the panel then i recommend using Iscroll 5 http://cubiq.org/iscroll-5 or if you are using Iscroll plugging already then create a scroller for the panel.

    However if the items are not that many and you are not using the Iscroll plugging the methods below work well.

    Method A. Using CSS to make the inner part of the panel contents scroll independent from the main content page and avoid dual scrolling.

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

    i have this in my panel

    data-position-fixed="true" 
    

    For 1.3 only, This is a small hack to stop the main page scrolling when the panel is scrolled right to the top or right to the bottom and the user keeps scrolling.

    .ui-page-active.ui-page-panel {
    height: 70%;
    }
    

    Demo

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

    Method B. Because the listview scrolls on top when the panel opens this method remembers the last scroll position on the main listview and animates to it upon Panel Close.

    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. store the Position of the (List-view as we scroll).

    Just to note the storePosition.topCoordinate !== 0 condition is there so we can avoid animating if we are right to the top of the list-view to save some CPU cycles.

    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 with one second animation scrolling after panel-close. Scroll down anywhere, open the panel and then close the Panel.

    http://jsfiddle.net/srym7v4m/

    DEMO 2 instant animation scrolling before panel-close. Scroll down anywhere, open the panel and then close the Panel.

    http://jsfiddle.net/3yyjkkya/

    Changes

    $( "#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);
      }
    }
    });
     })
    

    Update 16 November 2014.

    there is a nice guide here on how you can achieve Native Scrolling, which keeps scrolling positions even when you navigate from one page to the next

    http://outof.me/native-scrolling-in-jquery-mobilephonegap-applications/

    the demo is for an older version of JQM but works fine with the latest 1.4.5

    for the panels to work independently you need to add the following css

    .ui-panel-inner {
        position: absolute;
        width: 240px;
        max-width: 240px;
        top: 0px;
        bottom: 0px;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }
    

    if you intent to have the Panels larger than the default width: 17em; then adjust the width and max width in .ui-panel-inner

    Demo

    http://jsfiddle.net/6zhdnen0/

提交回复
热议问题