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以及所有＆＃34;滚动位置＆＃34;行话一起。

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

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

1 个答案: