Maintain Scroll Position When Panel Swipes Open

Question

I have a page with a side panel that swipes open. I would like the scroll position to remain in the same place, when this panel is swiped open. Currently, it snaps to the top. My below code is not working. Any advice?

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

Here's the fiddle.

Note: The function of the panel is to push the content of the page to the left, when opened. It should be scrollable, but the content of the page should not be. This panel can also be opened/closed with a toggle button on the page.

Answer 1

It turns out, the answer was pretty simple.

Adding height:100vh to the wrapper is what made the page jump, upon opening the panel. I added that to prevent to content from being scrollable. But, I discovered that if I put overflow:hidden on the body instead of the wrapper, it would prevent scrolling. So, I could eliminate height:100vh and all that "scroll position" jargon all together.

Here is the 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" );
  });