2012-12-05 12 views
7

मैं कुछ अनुभागों के साथ एक एकल पृष्ठ वेबसाइट बना रहा हूं जो प्रत्येक उपयोगकर्ता की विंडो को भरता है; मुझे वह काम मिल गया है।जावास्क्रिप्ट - ऑनस्कोल अगले एंकर पर आसानी से चलता है? कैसे?

मुझे क्या करना चाहते हैं:

जब उपयोगकर्ता स्क्रॉल ऊपर या नीचे वह/वह आसानी से ऊपर या नीचे (तदनुसार) अनुभाग के पहले या बाद में होगा। मेरे अनुभागों में से प्रत्येक के शीर्ष पर एक लंगर है।

यहां एक उदाहरण है जो मैं प्राप्त करने की कोशिश कर रहा हूं। प्रत्येक लेख पृष्ठ भरता है। एक बार स्क्रॉल करने के बाद आप अगले लेख पर जाएं।

http://www.made-my-day.com/

+0

क्या आप वाकई ऐसा करना चाहते हैं? यह डिफ़ॉल्ट स्क्रॉलिंग व्यवहार को तोड़ देता है जो उपयोगकर्ता अपेक्षा करते हैं। – Stuart

+0

मुझे यह सुनिश्चित करने के लिए मैं इसका उपयोग करना चाहता हूं। यह एक बहुत ही सरल और छोटा पृष्ठ है। एक डिजाइन प्रयोग की तरह एक सूचनात्मक साइट की तरह। –

उत्तर

5

मुझे लगता है कि आप इस प्लगइन का उपयोग करके काम पूरा कर सकते हैं: https://github.com/alvarotrigo/fullPage.js

इसके अलावा, यह सक्रिय रूप से अपडेट होने लगता है। रिपो को अंतिम प्रतिबद्धता 3 दिन पहले की गई थी।

चीयर्स!

4

आप scrollorama और superscrollorama पर एक नज़र रखना चाहिए।

वे बहुत अच्छे प्रभाव हैं जिनका उपयोग आप स्क्रॉलिंग के लिए कर सकते हैं, जिसमें आपके द्वारा प्रदान की गई साइट की तरह ही शामिल है।

--UPDATE--

ओ पी के साथ कुछ बात कर के बाद, मुझे एहसास हुआ कि दोनों पुस्तकालयों कि वह क्या चाहता है ऐसा नहीं करते हैं। तो, मेरा नया सुझाव reveal-js है, एक जेएस प्रेजेंटेशन लाइब्रेरी।

+0

धन्यवाद, मैं इसे देख लूंगा! –

+0

लूत की अच्छी स्क्रॉलिंग चीजें निश्चित रूप से वहां पर हैं, लेकिन मुझे वास्तव में यह नहीं मिला था? क्या मुझसे साफ़ - साफ़ कुछ चीज़ चूक रही है? –

+0

आप जो करना चाहते हैं वह स्क्रोलोरमा और सुपरस्क्रोलोरमा दोनों पर "पिन करें" जैसा है, है ना? – josemando

0

आप वास्तव में onscroll पर ऐसा नहीं करना चाहते हैं। गौर करें कि onscroll वास्तव में कुछ भी नहीं है जो कहता है कि "पृष्ठ का दृश्य चल रहा है"।

इसका मतलब यह नहीं है कि वे इसे करने के लिए मूसहेल का उपयोग कर रहे हैं।

फ़ोन पर, आपकी योजना समझ में आ सकती है: तो यह एक स्वाइप आंदोलन के बराबर ड्रैग आंदोलन बनाना होगा। महान।

स्क्रॉलिंग के लिए मेरी पसंदीदा विधि मध्य-माउस बटन पर क्लिक करना है, और उसके बाद माउस को एंकर पॉइंट के नीचे बस रखें, ताकि मैं स्क्रीन के प्रत्येक स्क्रॉल को स्क्रीन के पीछे स्क्रॉल कर सकूं।

मुझे लंबे ब्लॉक के लिए माउस पर हाथ की भी आवश्यकता नहीं है।

तो मेरे मामले में, onscroll 60 घटनाओं/सेकंड की तरह कुछ आग लग जाएगा, और यदि आप लेखों को ऑटो-कूदते हैं, तो मैं आपकी पूरी साइट की सामग्री के माध्यम से टेलीपोर्टिंग करने जा रहा हूं।

अन्य लोग अभी भी वास्तविक स्क्रॉलबार खींचते हैं।

पेज को स्थानांतरित करने की किसी भी विधि के बजाय मूसहेल और चाबियाँ (ऊपर/नीचे, पीजी-अप/पीजी-डाउन) को सुनना सुरक्षित है ... ... लेकिन क्या आप सुनिश्चित हैं कि सभी लेख जा रहे हैं इतना छोटा होने के लिए कि सभी सामग्री बेवकूफ-छोटे संकल्पों (आईफोन 3) पर भी, सभी ब्राउज़र विंडो में फिट बैठती है?

क्योंकि अगर लोगों को सामग्री पढ़ने के लिए स्क्रॉल करने की आवश्यकता है, तो अचानक आप बहुत अधिक जटिल समाधान से निपट रहे हैं:
आपको किसी के भी नियमित (या अनुकूलित) स्क्रॉल अनुरोधों को सुनना होगा दयालु, वर्तमान सामग्री के नीचे पहुंचने के लिए ... ... और फिर आपको उपयोगकर्ता को कुछ प्रकार की दृश्य कतार प्रदान करनी होगी कि वे अब सामग्री के बहुत नीचे हैं, और एक का उपयोग जारी रखते हैं ट्रिगर विधि (स्वाइप/ड्रैग/चाबियाँ/माउहेल) लेख स्विच करेंगे।

पहले दो ठीक हैं ... ... इसे स्मार्टफोन की तरह वसंत-भारित महसूस करते हैं।
... दूसरे दो के बारे में क्या, जहां लोग एक दूसरे में उन्हें कई बार मारने की उम्मीद कर सकते हैं, जहां वे जा रहे हैं?

+0

युक्तियों के लिए धन्यवाद! वेबसाइट पर मैं निर्माण कर रहा हूं, आपके पास प्रत्येक अनुभाग पर बहुत कम टेक्स्ट/जानकारी है - जिसका मूल रूप से मतलब है कि यह पहले से ही बहुत छोटी मोबाइल स्क्रीन पर काम करता है (कम से कम उन सभी जिन्हें मैंने परीक्षण किया है)। यह मीडिया-क्वेरीज़ का भी उपयोग करता है और मोबाइल के लिए थोड़ा अलग संस्करण है। –

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