面板滑动打开时保持滚动位置答案

【问题标题】：Maintain Scroll Position When Panel Swipes Open面板滑动打开时保持滚动位置
【发布时间】：2017-01-09 21:36:56
【问题描述】：

我有一个带有滑动打开侧面板的页面。当此面板被滑动打开时，我希望滚动位置保持在同一位置。目前，它捕捉到顶部。我下面的代码不起作用。有什么建议吗？

var storePosition = {
    topCoordinate : null
}
$(document).ready(function(){   

///////////////////////  JQUERY MOBILE SWIPING (Scroll position)  //////////////////////

$( "#B" ).panel({
  beforeopen: function( event ) {
  storePosition.topCoordinate =  $(this).offset().top;
    $( "body [data-role=page]" ).css("position","fixed");
  } 
});


$( "#B" ).panel({
  beforeclose: function( event ) {
    $( "body [data-role=page]" ).css("position","");
if($.mobile.activePage.attr("id") == "page" && storePosition.topCoordinate !== 0){

    $('html, body').animate({
scrollTop: $("#A").position().top += storePosition.topCoordinate - 60}, 10);
  }
}
}); 

//////////////////////  SIDE PANEL  //////////////////////

$('#open').click(function(){
if($('#B').width() > 0){
$('#B').animate({width: '0px'}),
$( ".container" ).removeClass( "no-scroll" ).animate({right: '200px'});
}
else{
$('#B').animate({width: '200px'}),
$( ".container" ).addClass( "no-scroll" ).animate({right: '200px'});
}
});

$('#close').click(function(){
$('#B').animate({width:"0px"}),
$( ".container" ).removeClass( "no-scroll" ).animate({right: '0px'});
});

$("body").on("swipeleft",function(){
    $('#B').animate({width:"200px"}),
    $( ".container" ).addClass( "no-scroll" ).animate({right: '200px'});
  });
$("#B").on("swiperight",function(){
    $(this).animate({width:"0px"}),
    $( ".container" ).removeClass( "no-scroll" ).animate({right: '0px'});
  });

这是fiddle.

注意：面板的作用是在打开时将页面内容向左推送。它应该是可滚动的，但页面的内容不应该是。此面板也可以通过页面上的切换按钮打开/关闭。

【问题讨论】：

标签： jquery-mobile mobile scroll panel swipe

【解决方案1】：

事实证明，答案很简单。

将height:100vh 添加到wrapper 是在打开面板时使页面跳转的原因。我添加了这一点以防止内容可滚动。但是，我发现如果我将overflow:hidden 放在body 而不是wrapper 上，它会阻止滚动。所以，我可以把height:100vh 和所有那些“滚动位置”的术语都去掉。

这里是fix.

///////////////////////  SEARCH TOGGLE  //////////////////////

$('#open').click(function(){
if($('#B').width() > 0){
$('#B').animate({width: '0px'}),
$( ".container" ).animate({right: '200px'});
$( "body" ).removeClass( "no-scroll" );
}
else{
$('#B').animate({width: '200px'}),
$( ".container" ).animate({right: '200px'});
$( "body" ).addClass( "no-scroll" );
}
});

$('#close').click(function(){
$('#B').animate({width:"0px"}),
$( ".container" ).animate({right: '0px'});
$( "body" ).removeClass( "no-scroll" );
});

$("body").on("swipeleft",function(){
    $('#B').animate({width:"200px"}),
    $( ".container" ).animate({right: '200px'});
    $( "body" ).addClass( "no-scroll" );
  });
$("#B").on("swiperight",function(){
    $(this).animate({width:"0px"}),
    $( ".container" ).animate({right: '0px'});
    $( "body" ).removeClass( "no-scroll" );
  });

【讨论】：