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

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.Come ottengo l'offset sinistro di un elemento fluttuante mentre si trova all'esterno della finestra?

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.

fonte

2015-05-17 Christopher Adolphe

Stai allertare '$ panelWrapper [i]' nel tuo JS. Non dovrebbe essere '$ panelScrollPos [i]'? Inoltre, non c'è larghezza nei div di '.panel' nel tuo CSS – Andy

sarebbe più facile se avessimo la larghezza che stai impostando. Ad esempio, la larghezza del wrapper principale è ampia come la somma della larghezza dei quattro pannelli? –

Forse un violino -> http://www.jsfiddle.net – Michelangelo

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/

fonte

2015-05-18 20:49:05

Grazie per l'aiuto! Tuttavia, qualcosa non è ancora chiaro ... questi elementi "inline-block' non erano" realmente "in una singola riga quando erano fuori dal viewport? Sto facendo questa domanda perché inizialmente quando avevo la larghezza degli elementi figlio impostati nel file CSS stesso, ho provato a ridurne la larghezza per verificare se fossero affiancati ... e lo erano. Ho anche notato che se applicassi 'float: left;' agli elementi figlio, la proprietà 'white-space' fa il trucco più. –

@Christopher white-space funziona solo per inline, inline-block (o simili come input/img) e testo. Float ha un comportamento speciale, agisce come elementi assoluti (presi fuori dal flusso regolare) ma utilizza ancora lo spazio all'interno del flusso di elementi. È davvero lontano dai valori di visualizzazione che sostituisce per il comportamento. –

controlla qui http://stackoverflow.com/questions/15172520/advantages-of-using-displayinline-block-vs-floatleft-in-css e http://stackoverflow.com/questions/11805352/floatleft-vs- displayinline-vs-displayinline-block-vs-displaytable-cell @Christopher –

Si può provare il getBoundingClientRect.

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

fonte

2015-05-18 08:50:57

Grazie per aver condiviso questo metodo. Sarà sicuramente utile in seguito. La punta di GCyrillus CSS mi ha aiutato. –

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

risposta

Problemi correlati