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

Question

我有一个带有侧面板的页面，可以滑动打开。当这个面板被滑动打开时，我希望滚动位置保持在同一个地方。目前，它会吸附到顶部。我下面的代码不工作。有什么建议吗？

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.

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

Answer 1

事实证明，答案很简单。

将height:100vh 添加到wrapper 是使页面在打开面板时跳转的原因。我添加它是为了防止内容可滚动。但是，我发现如果我将 overflow:hidden 放在 body 而不是 wrapper 上，它会阻止滚动。所以，我可以一起消除 height:100vh 和所有 "scroll position" 行话。

这是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" );
  });

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

Maintain Scroll Position When Panel Swipes Open

mobile

scroll

panel

swipe

jquery-mobile