Center Scroll basierend auf Ansichtsfenster nicht im Container fester Größe

Question

Ich arbeite an einem Projekt auf der Grundlage eines großen Bildes (7000 X 5321). Das Bild wird wie eine riesige Karte sein. In der Mitte dieser Karte hat der Benutzer den Hauptinteressenpunkt. Mein Ziel ist also, dass sich der Spot nach dem Laden der Seite in der Mitte des Ansichtsfensters befindet und von dort aus horizontal oder vertikal scrollt.

Mein Problem ist, dass, während ich die Scroll-Position mit meinem Skript anpassen kann ich brauche diese Seite reagieren, so dass die Anpassungen, um diese Stelle muss basierend auf dem Fenster Viewport getan werden und nicht in der Größe des Bildes basieren und keine Ahnung, ob das möglich ist.

In dem Ausschnitt unten können Sie meinen tatsächlichen Code und mein Problem sehen. Ich habe ein rotes Quadrat in den Container zentriert. Wenn Sie das Schnipsel auf der ganzen Seite in einem Panoramabildschirm überprüfen, wird der Spot zentriert (mehr oder weniger), wie ich es möchte, aber es wird nicht funktionieren, wenn sich die Fensterbreite oder -höhe ändert (wie Sie in dem kleinen Fenster sehen können)

Jede Hilfe oder Idee, an der ich arbeiten könnte, wäre sehr geschätzt.

$(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

die gefunden Weg, es zu tun. Es war nicht so schwierig wie ich dachte. Diego Cesar gab mir den Hinweis, den ich brauchte.

$(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

Ich bin nicht sicher, wie es zu 100% mit jQuery, aber was Sie brauchen, ist so etwas wie:

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