パネルのスワイプが開いたときのスクロール位置の維持

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

答えはかなり簡単でした。

wrapperにheight:100vhを追加すると、パネルを開くとページがジャンプしたものです。私はコンテンツがスクロール可能であるのを防ぐためにそれを追加しました。しかし、overflow:hiddenをの代わりに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"); 
    }); 

です