Come ottengo l'offset sinistro di un elemento fluttuante mentre si trova all'esterno della finestra?

Question

Ecco la mia situazione. Ho creato diversi pannelli accatastati fianco a fianco che sono avvolti in un contenitore principale. Ogni pannello prende il 100% della larghezza e altezza della finestra. Il mio obiettivo è essere in grado di scorrere orizzontalmente su ciascun pannello quando faccio clic sul rispettivo link. Funziona bene usando un approccio css puro. Tuttavia, sto imparando jQuery e desidero utilizzare il metodo .scrollTo() per raggiungere questo obiettivo.

Quando i pannelli sono stati impilati uno sotto l'altro (cioè verticalmente), sono stato in grado di ottenere l'offset superiore di ciascun pannello e scorrere piacevolmente verso la loro posizione.

Con la variazione orizzontale, ho problemi per ottenere l'offset sinistro dei pannelli. Ottengo un offset sinistro di zero per tutti loro. Se la mia logica è corretta, diciamo che il viewport è largo 1920 px, l'offset sinistro del 2 ° pannello dovrebbe essere a 1920px, il 3 a 3840px ecc.

Dalle informazioni che ho raccolto finora, è perché i pannelli sono all'esterno viewport. E infatti, ho applicato una larghezza del 20% ai pannelli in modo che fossero tutti visibili nel viewport, quindi ho provato ad avvisare il loro offset sinistro. Sono stati suggeriti con successo.

Quindi come posso risolvere questo problema? Potrebbe sembrare che sto reinventando la ruota ma, come ho detto, sto imparando jQuery, quindi ho bisogno di capire perché si comporta come tale e come posso risolverlo. Qualsiasi aiuto sarà molto apprezzato :) Di seguito sono riportati alcuni frammenti di ciò che ho finora.

Grazie.

Il Markup:

<div class="mainWrapper"> 
    <section class="panel" id="panel-1"></section> 
    <section class="panel" id="panel-2"></section> 
    <section class="panel" id="panel-3"></section> 
    <section class="panel" id="panel-4"></section> 
</div> 

Il CSS:

.mainWrapper, .panel { 
    position: relative; 
    height: 100%; 
} 

.mainWrapper { 
    top: 0; 
    left: 0; 
} 

.panel { 
    display: inline-block; 
    background: rgba(255, 255, 255, 1); 
} 

Il Javascript:

$(document).ready(function() { 
    var $panelWrapper = $('.mainWrapper'); 
    var $panels = $('.mainWrapper').find('.panel'); 
    var $panelScrollPos = new Array(); 

    $panels.each(function(i) { 
    //This is where I need help. It's not working 
    $panelScrollPos[i] = Math.round($(this).offset().left - $panelWrapper.offset().left); 

    alert('Panels position are: ' + $panelScrollPos[i]); 
    }); 
}); 

Si noti che ho utilizzato il metodo .width() per impostare la larghezza di .mainWrapper e .panel elementi. Non l'ho incluso nello snippet mentre sta funzionando.

Answer 1

per essere in grado di impostare le inline-block elementi su una sola riga, indipendentemente dalla larghezza della confezione è necessario reimpostare il white-space Propertie:

#wrapper { 
white-space:nowrap; 
width:100%; 
} 
.child { 
display:inline-block; 
white-space:normal; 
width:100%; 
} 

vostro violino aggiornamento: http://jsfiddle.net/n3e6xzbj/

Answer 2

Si può provare il getBoundingClientRect.

Il risultato di tale chiamata ha una posizione a sinistra che probabilmente è ciò che si cerca.