隐藏内容时如何避免位置跳跃

How to avoid position jumping when hiding content?

本文关键字：何避免 位置 跳跃 隐藏      更新时间：2023-09-26

我一直在现场工作https://hotel4meetings.firebaseapp.com/，单击小地图将展开下面的大地图。

但是，当您在大地图下方滚动并单击底部的按钮关闭地图时，内容会跳到另一个位置。

我想知道是否可以最大限度地减少关闭按钮下内容的跳跃？

我的理由：用户正在查看关闭按钮下方的内容，因此最好不要移动该内容。

该网站是基于Angular的，但问题并不是Angular特有的。同样的功能也可以实现，例如使用jQuery。

假设.map是您的大映射容器，.close是关闭映射的按钮：

$('.close').click(function(){
     var sctop = $(window).scrollTop();
     var maptop = $('.map').offset().top;
     dif = maptop - sctop;
     if(dif <= 0) 
          $(window).scrollTop($(window).scrollTop()+dif-100);
    $('.map').hide();
});

带动画：

$('.close').click(function(){
    $('.map').slideUp(300);
    var sctop = $(window).scrollTop() - $('.map').height();
 $('html, body').animate({scrollTop : sctop}, 300);
});

以下是演示：https://jsfiddle.net/ym0ek6oq/1/

另一个演示：https://jsfiddle.net/ym0ek6oq/2/

这并不是内容在跳跃，而是当你隐藏元素时，它占用的空间会关闭。

你可以尝试使用

$("#someID").css("visibility", "hidden");

带有

#someID {
    display: block; 
}

这应该符合你的要求，但会在页面中留下空白。

也许你可以在关闭地图时将页面向下滚动，滚动距离与可见时相同，以取消内容的明显跳跃。但不确定它是否能达到预期效果。

希望这能有所帮助，Tim

相关文章：