隱藏內容時如何避免位置跳躍？

Question

我一直在網站https://hotel4meetings.firebaseapp.com/上工作，點擊小地圖會展開下面的大地圖。

但是，當您滾動到大地圖下方並單擊底部的按鈕關閉地圖時，內容會跳轉到另一個位置。

我想知道是否可以最大限度地減少關閉按鈕下方內容的跳轉？

我的推理：用戶正在查看關閉按鈕下方的內容，因此最好不要移動該內容。

該站點基於 Angular，但問題並非特定於 Angular。 例如，可以使用 jQuery 實現相同的功能。

Answer 1

假設.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/

Answer 2

並不是內容在跳躍，而是當您隱藏元素時，它占用的空間會關閉。

您可以嘗試使用

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

和

#someID {
    display: block; 
}

這應該可以滿足您的要求，但它會在頁面內留下一個空白區域。

也許您可以在關閉地圖時將頁面向下滾動到與可見時相同的距離以取消內容的明顯跳轉。 不確定它會產生預期的效果。

希望這會有所幫助，蒂姆