मैं कैसे भरपाई यह व्यूपोर्ट के बाहर है, जबकि एक अस्थायी तत्व के बाएं प्राप्त करते हैं?

Question

यहां मेरी स्थिति है। मैंने कई पैनलों को एक तरफ रखा है जो एक मुख्य कंटेनर में लपेटा गया है। प्रत्येक पैनल 100% व्यूपोर्ट चौड़ाई और ऊंचाई लेता है। मेरा लक्ष्य प्रत्येक पैनल को क्षैतिज रूप से स्क्रॉल करने में सक्षम होना है जब मैं अपने संबंधित लिंक पर क्लिक करता हूं। यह एक शुद्ध सीएसएस दृष्टिकोण का उपयोग कर ठीक काम करता है। हालांकि, मैं jQuery सीख रहा हूं और मैं इसे प्राप्त करने के लिए .scrollTo() विधि का उपयोग करना चाहता हूं।

जब पैनल अन्य (यानी खड़ी) नीचे एक खड़ी कर रहे थे, मैं प्रत्येक पैनल के ऑफसेट शीर्ष को प्राप्त करने और अच्छी तरह से अपनी स्थिति के लिए स्क्रॉल करने में सक्षम था।

क्षैतिज भिन्नता के साथ

, मैं बाईं पैनल के ऑफसेट प्राप्त करने के लिए समस्याएं हो रही हैं। मुझे उन सभी के लिए शून्य का बायां ऑफसेट मिलता है। अगर मेरा तर्क सही है, तो कहें कि व्यूपोर्ट 1920 पीएक्स चौड़ा है, दूसरा पैनल का बायां ऑफसेट 1920 पीएक्स पर होना चाहिए, तीसरा 3840 पीएक्स आदि होना चाहिए

अब तक जो जानकारी मैंने एकत्र की है, उससे ऐसा इसलिए है क्योंकि पैनल बाहर हैं व्यूपोर्ट। और वास्तव में, मैंने पैनलों में 20% की चौड़ाई लागू की है ताकि वे सभी व्यूपोर्ट में दिखाई दे सकें, फिर मैंने अपने बाएं ऑफसेट को अलर्ट करने का प्रयास किया। उन्हें सफलतापूर्वक मुझसे प्रेरित किया गया।

तो मैं कैसे इस समस्या के समाधान मिलता है? यह लग सकता है जैसे मैं पहिया पुनर्रचना रहा हूँ, लेकिन जैसे मैंने कहा, मैं jQuery सीख रहा हूँ तो मैं समझने के लिए क्यों यह इस तरह के रूप में व्यवहार कर रहा है और मुझे लगता है कि यह कैसे हल कर सकते हैं की जरूरत है। किसी भी मदद की अत्यधिक सराहना की जाएगी :) नीचे मेरे पास अब तक के स्निपेट हैं।

धन्यवाद।

मार्कअप:

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

सीएसएस:

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

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

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

जावास्क्रिप्ट:

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

कृपया ध्यान दें कि मैं() विधि .width का इस्तेमाल किया है .mainWrapper और .panel तत्वों की चौड़ाई सेट करने के लिए। के रूप में यह काम कर रहा है मैं स्निपेट में यह शामिल नहीं किया है।

Answer 1

, एक पंक्ति पर अपने inline-block तत्वों सेट करने के लिए कोई आवरण की चौड़ाई बात आप white-space propertie पुनर्स्थापित करना चाहिए सक्षम होने के लिए:

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

अपने बेला अद्यतन: http://jsfiddle.net/n3e6xzbj/

Answer 2

आप getBoundingClientRect को आजमा सकते हैं।

कि कॉल का परिणाम है जो शायद आप क्या चाहते हैं है एक बाएं स्थिति है।