Jak uzyskać lewe przesunięcie elementu pływającego, gdy znajduje się poza rzutnią?

Question

Oto moja sytuacja. Stworzyłem kilka paneli ułożonych jeden obok drugiego, owiniętych w główny pojemnik. Każdy panel przyjmuje 100% szerokość i wysokość widoku. Moim celem jest możliwość przewijania w poziomie do każdego panelu po kliknięciu odpowiedniego łącza. To działa dobrze przy użyciu czystego podejścia css. Jednak uczę się jQuery i chcę użyć metody .scrollTo(), aby to osiągnąć.

Gdy panele były ułożone jeden pod drugim (tj. Pionowo), byłem w stanie uzyskać górne przesunięcie każdego panelu i przewinąć do ładnej pozycji.

Przy wariacjach poziomych mam problem z uzyskaniem lewego przesunięcia paneli. Dostaję lewe przesunięcie zerowe dla wszystkich z nich. Jeśli moja logika jest prawidłowa, powiedzmy, że szerokość ekranu wynosi 1920 pikseli, to drugie przesunięcie powinno wynosić 1920 pikseli, trzecie - 3840 pikseli itd.

Z informacji, które do tej pory zebrałem, wynika to z tego, że panele znajdują się poza obszarem rzutnia. I rzeczywiście, zastosowałem szerokość 20% do paneli tak, że wszystkie były widoczne w oknie roboczym, a następnie próbowałem ostrzec ich lewe przesunięcie. Zostali do mnie zachęceni.

Jak obejść ten problem? Mogłoby się wydawać, że odkrywam koło, ale jak powiedziałem, uczę się jQuery, więc muszę zrozumieć, dlaczego tak się zachowuje i jak mogę to rozwiązać. Każda pomoc będzie wysoko ceniona :) Poniżej znajdują się fragmenty tego, co mam do tej pory.

Dzięki.

znaczników:

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

CSS:

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

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

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

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]); 
    }); 
}); 

Należy pamiętać, że użyłem metody .width() do ustawienia szerokości elementów .mainWrapper i .panel. Nie uwzględniłem go w opisie, ponieważ działa.

Answer 1

aby móc ustawić elementy inline-block w jednej linii, bez względu na szerokość owijki należy zresetować white-space propertie:

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

Twój skrzypce aktualizacja: http://jsfiddle.net/n3e6xzbj/

Answer 2

Możesz wypróbować getBoundingClientRect.

Wynik tego połączenia ma lewą pozycję, która prawdopodobnie jest tym, czego szukasz.