Поддержание положения прокрутки при открытии панели Swapes

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.

Примечание: Функция панели нажать содержимое страницы влево, когда открыт. Он должен быть прокручиваемым, но содержимого страницы не должно быть. Эта панель также может быть открыта/закрыта с помощью кнопки переключения на странице.

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