Maintien de la position de défilement lorsque le panneau est ouvert

Question

J'ai une page avec un panneau latéral qui s'ouvre. Je voudrais que la position de défilement reste au même endroit, lorsque ce panneau est ouvert. Actuellement, il s'enclenche au sommet. Mon code ci-dessous ne fonctionne pas. Aucun conseil?

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

Voici le fiddle.

Note: La fonction du panneau est de pousser le contenu de la page à gauche, lors de l'ouverture. Il devrait être défilable, mais le contenu de la page ne devrait pas être. Ce panneau peut également être ouvert/fermé avec un bouton à bascule sur la page.

Answer 1

Il s'avère que la réponse était assez simple.

Ajout de height:100vh au wrapper est ce qui a fait sauter la page, lors de l'ouverture du panneau. J'ai ajouté cela pour empêcher le contenu d'être scrollable. Mais, j'ai découvert que si je mets overflow:hidden sur le body au lieu du wrapper, cela empêcherait le défilement. Donc, je pourrais éliminer height:100vh et tout ce jargon "position de défilement" tous ensemble.

Voici le 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"); 
    });