2015-01-20 14 views
6

मैं एक वेबपृष्ठ बना रहा हूं जिसमें कुछ ऑफ-स्क्रीन सामग्री है जो केवल विशिष्ट समय पर स्लाइड करने की आवश्यकता है। इसे प्राप्त करने के लिए मैं html, body पर सेट कर रहा हूं। इस तरह उपयोगकर्ता सामग्री पर जाने के लिए बाएं या दाएं स्क्रॉल नहीं कर सकता है।window.pageYOffset हमेशा ओवरफ्लो-एक्स के साथ 0 है: छुपा

हालांकि, एप्लिकेशन में किसी बिंदु पर मुझे उस राशि की भी आवश्यकता है जिसे उपयोगकर्ता ने अभी तक स्क्रॉल किया है। जहां तक ​​मुझे पता है कि window.pageYOffset ऐसा करने के सबसे विश्वसनीय तरीकों में से एक है।

हालांकि, जब मैंने overflow-x नियम सेट किया था। window.pageYOffset हमेशा 0 के बराबर है।

क्या ये चीजें एक-दूसरे से बहुत असंबद्ध नहीं होनी चाहिए? मैं इसे कैसे ठीक करूं?

मैंने सफारी, फ़ायरफ़ॉक्स और क्रोम पर इसका परीक्षण किया है।

मैंने document.documentElement.scrollTop की कोशिश की है लेकिन यह केवल फ़ायरफ़ॉक्स पर काम करता है।

एनबी:

मैं एक बहुत ही सरल उदाहरण के साथ समस्या यह पुन: पेश करने में सक्षम नहीं था। मेरे ऐप में एक कंटेनर में मुख्य सामग्री भी है जिसमें position: absolute है। अगर मैं इसे हटा देता हूं, तो सबकुछ काम करता है।

तो यह और postion: absolute पर .content पर शरीर के अंदर overflow-x: hidden का संयोजन प्रतीत होता है।

मैं आसानी से स्थिति की पूरी आवश्यकता से छुटकारा नहीं पा सकता हूं, क्योंकि विभिन्न .content कंटेनरों को एक-दूसरे पर रखा जा सकता है।

संपादित करें 2: यह भी वीडर हो जाता है: मुझे transform: translate(0,0).content पर सेट किया गया है ताकि बाद में कुछ अन्य मूल्यों में संक्रमण हो सके। अगर मैं इसे हटा देता हूं, तो सब ठीक काम करता है! फिर भी एक और प्रतीत होता है कि असंबद्ध सीएसएस संपत्ति जो हस्तक्षेप करती है।

उत्तर

5

मुझे एक ही समस्या थी और मैंने इसे लंबी खोज के बाद हल किया।

समस्या शरीर के अंदर overflow-x: hidden से आता है। तो यह अजीब व्यवहार ठीक करने के लिए मैं इस तरह एक आवरण इस्तेमाल किया:

<body> 
    <div class="myWrapper"> 
     All your content here 
    </div> 
</body> 

और उसके बाद मैं इसके बजाय, शरीर आवरण के सीएसएस में अतिप्रवाह विशेषता चले गए html में यह बताने की:

html, body { 
    margin:0; 
    padding:0; 
    height: 100%; 
} 
.wrapper { 
    height: 100%; 
    overflow-x: hidden; 
} 

इस छोटे के साथ जब मैं अपने रैपर तत्व में स्थित मेरी srollTop propertie स्कैन करता हूं, तो चाल अब 0 नहीं बल्कि असली मान है। इसके बिना यह क्रोम पर काम नहीं करता है ...

संबंधित मुद्दे