ビューポートに基づく中心スクロール容器の固定サイズは

Question

私は大きな画像（7000 X 5321）に基づいてプロジェクトを進めています。イメージは巨大な地図のようになります。この地図の中心には、ユーザーが主な関心事を持っているので、ページが読み込まれると、このスポットはビューポートの中心にある必要があり、そこから、ユーザーは水平または垂直にスクロールします。

私のスクリプトでスクロール位置を調整することができますが、私はこのページを反応させる必要があるので、このスポットを中心にする調整は、ウィンドウのビューポートに基づいて行われる必要があります。これができるかどうかは分かりません。

下のスニペットでは、私の実際のコードと私の問題を見ることができます。私はコンテナの内側に赤い四角形を中心に置いています。パノラマ画面でフルページでスニペットを確認すると、スポットは中央に表示されます（多かれ少なかれ）が好きですが、ウィンドウの幅や高さが変更されても機能しません（小さなウィンドウで見ることができます）

私が取り組むことができた助けやアイデアは、非常に感謝しています。

$(document).ready(function() { 
 
    $('html, body').animate({ 
 
    scrollTop: ($('body').height()/2 - 450) 
 
    }, 0); 
 
    $('html, body').animate({ 
 
    scrollLeft: ($('body').width()/2 - 1000) 
 
    }, 0); 
 
});

html, 
 
body { 
 
    margin: 0; 
 
    height: 5321px; 
 
    width: 7000px; 
 
} 
 

 
.contenedor-mapa { 
 
    height: 5321px; 
 
    width: 7000px; 
 
    position: relative; 
 
    background-color: grey; 
 
} 
 

 
.center { 
 
    width: 10px; 
 
    height: 10px; 
 
    background-color: red; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="contenedor-mapa"> 
 
    <div class="center"></div> 
 
</div>

Answer 1

それを行う方法。私が思ったほど難しいことではありませんでした。ディエゴ・セザールは私に必要なヒントをくれました。仕事で私は考えていなかったaproach i'ts

$(document).ready(function() { 
 
\t $(window).resize(function() { 
 
    var viewportWidth = $(window).innerWidth(); 
 
    var viewportHeight = $(window).innerHeight(); 
 

 
    $('html, body').animate({ 
 
     scrollTop: ($('body').height()/2 - viewportHeight/2) 
 
    }, 0); 
 
    $('html, body').animate({ 
 
     scrollLeft: ($('body').width()/2 - viewportWidth/2) 
 
    }, 0); 
 
    }).resize(); 
 
});

html, 
 
body { 
 
    margin: 0; 
 
    height: 5321px; 
 
    width: 7000px; 
 
} 
 

 
.contenedor-mapa { 
 
    height: 5321px; 
 
    width: 7000px; 
 
    position: relative; 
 
    background-color: grey; 
 
} 
 

 
.center { 
 
    width: 10px; 
 
    height: 10px; 
 
    background-color: red; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="contenedor-mapa"> 
 
    <div class="center"></div> 
 
</div>

Answer 2

私はjQueryを使ってそれを100％にするためにする方法がわからないんだけど、何が必要のようなものです：

見つかり

$('html, body').animate({ 
 
    scrollTop: $('body').height()/2 - window.innerHeight/2 
 
    }, 0); 
 
    $('html, body').animate({ 
 
    scrollLeft: $('body').width()/2 - window.innerWidth/2 
 
    }, 0);